I've set up a JS fiddle of what I'm working with. http://jsfiddle.net/bjankord/2EKQv/
It seems if I add a height to one of the child elements of a parent with display:box set, all the other child elements stretch to that height. I don't know if this is how the display:box and box-ordinal-group properties are supposed to work, if so that's unfortunate. I was hoping to be able to reorder my html markup with CSS using box-ordinal-group when working on responsive web designs, but this height issues is killing me.
I am by no means a flexbox expert but from some quick testing I think you might need to change your layout to be three vertical columns and add box-orient:vertical to each of the parent elements. In order to have one child element taller than the others set the box-flex: property to 2 on your withHeight class and set the min-height of that class to 300px;
Fiddle:
So I messed with your code a bit. I added a parent container with box-orient:horizontal to line up the three columns and gave each column box-orient:vertical. This seemed to fix the issue with height not being respected.
http://jsfiddle.net/mdJ2L/1/
Related
I have a minor CSS issue. This is the website. As you can see, the div at the bottom overflows. How do I fix it? I suppose it's just a CSS rule I have to add/change. Thanks
Apply:
overflow:hidden;
to site_content_large_div
...or, if you want the div to grow with its contents, and for its container to work properly, then remove the height value applied to site_content_container_div, and apply a clearfix to the same, so that it's enclosed, floated elements will contribute to its calculated height.
Clearfix solves a common problem with float-based layouts, so it's best to create a separate, reusable class for this fix that you can apply to any element containing floats that need to be entirely visually contained.
This article provides all the necessary code: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
I've found some CSS templates where some classes have the overflow:hidden property, but no size defined. If I recall correctly, block elements stretch to fit their content unless otherwise specified. Since this is not the case, I feel that putting the overflow:hidden is pointless and I can delete it without hesitation. Is this right or am I missing something?
While that's the main purpose of the overflow property, it's not the only effect it has on rendering. The other major effect it has is that setting overflow to anything other than visible (the default) causes a block box to establish its own block formatting context.
This is mainly used to contain floats without the need for a clearfix; however that isn't the only effect of having a new BFC; there are a number of other corner cases that are better described elsewhere in the spec. Also see this lengthy write-up on the reasoning for this behavior (which, oddly enough, has very little to do with containing floats; that actually ends up being nothing more than a side effect).
So if you remove that overflow declaration, you may break float layouts, among other things. I suggest avoiding doing so unless it's absolutely necessary or you're sure it won't affect the layout.
If there are floating children inside that div, then overflow: hidden is probably there to contain them.
overflow: hidden creates a new block formatting context, and elements that create new block formatting contexts contain floats.
It may depend. if your div contains some floated elements you could use
div {
height: auto;
overflow : hidden;
}
as a workaround for the clearing. So I wouldn't delete that rule without seeing the effect on the layout
overflow:hidden can come in handy if you have a child element with a width specified which is greater than the container's max allowed width. Otherwise it will stretch the container.
See example
A common use of this is when displaying a carousel, with floated child elements. The elements need to appear inline, but hidden, so that they can come into vision when the left CSS property is changed.
Basically I have a parent div with height and width and overflow:hidden and then within that some more divs with it.
We are dealing with fluid content and some of the divs go over the corners so get hidden.
But one is half and half.
Is there a way to make that completely hidden?
CSS would be best.
I don't think you can know if a child from an overflow:hidden parent is in the hidden or visible section without using Javascript (I might be wrong here).
What I suggest is that you set all the child divs to a fixed dimension d and set the parent div to a multiple of d so every child is either completely visible of not.
This solution won't work if you fill your divs with different-length content
If I understand your post, you have a wrapping div that has overflow:hidden and you want to make any child element hidden unless it can be completely displayed within the wrapping div.
There may be a better way to do it, but I would use a CSS media query. If you're unsure of how they work this is a good place to start:
http://css-tricks.com/resolution-specific-stylesheets/
Using this method, you could determine how many blocks of each type should be displayed on any given set of resolutions. I'd be interested in seeing how it goes, or if you end up using a different approach. Best of luck!
I am working on a web page that used a fixed width layout, centered in the browser. The width of the centered container is set in pixels.
On a couple of pages, there is a large data table inside the content container. In Firefox the table overflows the fixed width container. IE is more complex and will expand the container around the table, and because of some layout issues the container uses overflow:scroll just for IE.
I need to find out if I can use a fixed width on the container, but also allow it to expand to wrap the large data table. I also need to avoid a solution where I would be modifying the HTML... I can't for example use an ID to only target those containers on pages with large tables. I need a pure CSS solution.
My feeling is that this is impossible, and I am going to HAVE to put an ID on those specific containers that need to be larger than the standard. I'm asking here because I really need a second opinion.
Just a note: I have also experimented with min/max-width, without success.
If min-width and overflow don't work, you're going to need css hacks.
If the problem with min-width is that the container is a block-level element and expands to page width, try using a variant of display:inline on that container, so it doesn't stretch. (Or maybe margin.)
I have noticed that both IE6 and IE7 push the parent div down when an element inside has padding-bottom ... what is the best fix for this? Is it possible to fix this with valid css?
EDIT
The solution I used was to set overflow: auto in the child element (as mentioned below in the accepted answer). I went with this approach because my child element height was dynamic, and thus I couldn't set it.
padding-bottom is added to the child elements total height, so even if the child element is empty, padding-bottom:10px; will give it a total height of 10px. And in all modern browsers, the parent element will expand to give space to it's child(s).
But if you wish to have a set height on the parent, you could just set a height on the parent and control the child's content by overflow:auto/hidden/scroll..
Or you could set parent as position:relative; and set position:absolute; to the child element.
Kinda depends on exactly what you want..
Check your setting a doctype and not running into quirksmode, next use a reset stylesheet to make sure that all your elements start of on the same foot.
If your still getting additional padding in a certain version of IE, use a conditional comment to add an additional stylesheet for that browser.
I haven't seen IE8 or Firefox "push the parent down" when padding is applied to a child element; it's just that the parent element's height expands to accommodate the child. This is the correct automatic behaviour in CSS. I made a brief demo:
http://robertgrant.org/testbed/paddingbottom.xhtml
Feel free to try it in IE6/IE7 and see what happens (needs Javascript enabled to make the link work, but you can see what's going on even without that).
If you want to constrain the parent's height, then set it (e.g. height: 100px) and set its overflow property to hidden.