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

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:…

Accepted Answer

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.

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

Solution

Problem