How can I avoid div overflowing my container without using overflow:hidden? - html

Question

In my new design, I'm using a wrapper div. My problem was that elements inside my wrapper was floating outside my div and I got the problem described in the Float Clearing section over at css-tricks.com.
I solved this by adding overflow:hidden and everything works fine. There is just one problem. Inside my header wrapper, I have a drop down menu that is no longer visible.
My drop down menu is inside my settings container.
I have tried setting settings to position: absolute; z-index: 800;, but that didn't help.
How can I solve my wrapper issue and still be able to show specific items outside my wrapper?
Her is my fiddle: http://jsfiddle.net/sXVbT/3/
Update
I just had peek at bootstrap css and they are using display:table. This works just as good as overflow:hidden. Is there any cavities using display:table? If not, why haven't people been using this instead of all the other different solutions?
They also have additional CSS
.wrapper:before, .wrapper:after {
content: "";
display: table;
line-height: 0;
}
.wrapper:after {
clear: both;
}
.wrapper:before, .wrapper:after {
content: "";
display: table;
line-height: 0;
}
Do I need this? I don't see any benefits in my fiddle: http://jsfiddle.net/sXVbT/5/.

Answer 1

It will (mostly) work fine with display: block instead of table in .wrapper:after.
In general, people tend to avoid display: table and its cohorts in css, because they (undeservedly) bear the stigma of the old "layout with tables" hell. I say "undeservedly", but I must admit that I rarely if ever use them either. display: table-cell does have various side effects, but I haven't used display: table enough to tell if it has any.
But I'm quite sure display: table on the parent element doesn't do much (in terms of clearing floats) - and Chrome seems to confirm it when removing the :after part of the css on your jsFiddle.
It's actually the .wrapper:after that does the job (although you don't need two identical css rules):
.wrapper:before, /* You can leave this out. It prevents top
margin-collapse, and isn't part of the clear
solution itself */
.wrapper:after
{
content: ""; /* Adds content, so you don't have to.
An Opera bug means you may need a space: " " */
display: table; /* May be 'block', but if you use
:before, it must be 'table' */
line-height: 0; /* Not sure why it would be needed */
}
.wrapper:after {
clear: both; /* Does the actual clearing for you */
}
So the short version is:
.wrapper:after {
content: "";
display: block;
clear: both;
}
Unless top margins of your child elements collapse. In that case, use the bootstrap version (although I still don't see the need for the line-height):
.wrapper:before, .wrapper:after {
content: "";
display: table;
line-height: 0;
}
.wrapper:after {
clear: both;
}
To be clear, what the :before part does is make this solution work exactly like overflow: hidden (except for the unwanted part where overflowing content becomes, well, hidden). overflow: hidden had the advantage of letting any contained elements that weren't floated keep their top and bottom margins. Some other solutions collapsed those margins, and you had to use padding on the container instead, if you needed space between the container and non-float children.
The :before trick lets the contained non-float elements keep their top margin. The :after part already takes care of their bottom margin, in addition to actually doing the clearing of the floats.