force a div to contain floated child divs

Question

I'm trying to customize the twentyeleven theme in Wordpress. It has a 2-columns layout set up by:

<div id="main">
     <div id="primary"></div>
     <div id="secondary"></div>
</div>

and

#main {
    clear: both;
    padding: 1.625em 0 0;
}
#primary {
    float: left;
    margin: 0;
    width: 100%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

I am not sure that there are other relevant css properties inside style.css which I have not recognized. Anyway, the child divs lie outside #main. How can I force to have the child divs contained in #main? (apart from reducing the width of #primary, which yields no effect to me)

Three replies equally acceptable. Please suggest me which one worths the "accepted answer" check. — tic, Aug 21 '12 at 14:28

score 33 · Answer 1 · edited Jan 31 '17 at 16:46

33

You need to add overflow: auto to #main:

#main {
    clear: both;
    padding: 1.625em 0 0;
    overflow: auto;
}

edited Jan 31 '17 at 16:46

thanksd

54,176
22
157
150

answered Aug 15 '12 at 05:57

Blender

289,723
53
439
496

Why does this work? [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) and [W3](http://www.w3.org/TR/CSS21/visufx.html) are kind of hazy about what `overflow: auto` does (besides saying that it's UA-dependent) and I'm frightened to use CSS that I don't understand. `overflow: hidden` and `overflow: scroll` both seem to achieve the same effect, but I don't know why *they* work, either. – Mark Amery Mar 31 '15 at 19:11
That link (which I already found since posting) doesn't actually contain any explanation of *why* (pretty much just goes 'whoa, this works'), but there's an attempt at explaining the mechanics at http://stackoverflow.com/a/16056509/1709587 that looks decent at a glance. I need to read further. – Mark Amery Mar 31 '15 at 20:01
I previously commented that this wasn't working on current versions of chrome -- this was wrong, but you do need to make sure your element has `display: block` in order for it to work. You can also use `display: flow-root`, but the support for it [isn't great](https://caniuse.com/#search=flow-root) – Jules Feb 16 '18 at 09:41

LeBen · Answer 2 · 2020-11-16T16:13:16.023

13

You should use the clearfix method with pseudo-element :after because in your case, the clear isn't really applied after the children.

#main:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; 
}

http://jsfiddle.net/zfsjb/

EDIT 2020:

Since a while now, this simpler solution works just as fine:

#main::after {
    content: "";
    display: table;
    clear: both;
}

Also it’s now recommended to use ::after instead of :after to match other pseudo-elements.

edited Nov 16 '20 at 16:13

answered Aug 15 '12 at 07:57

LeBen

1,884
12
21

Perfect! Thank you. I've been looking for this for years. I avoided the overflow:auto as i sometimes ended up with unexpected scroll bars and i think this use of overflow is obscure. And sometimes I ended up using the old hack of nbsp; in the container.Your CSS makes logical sense to me. – john blair Apr 04 '20 at 13:19
This is amazingly beautiful – TravelingAries Nov 03 '20 at 06:46

score 1 · Answer 3 · answered Aug 15 '12 at 06:02

1

Try giving width: 100%; position:absolute to #main.

Here is a working Live Demo

answered Aug 15 '12 at 06:02

Alfred

21,058
61
167
249

score -1 · Answer 4 · answered Apr 22 '20 at 23:14

-1

in some case you just need to apply min-height to the parent element

answered Apr 22 '20 at 23:14

A. Bouichou

11
2

Will be useful if you add some examples that solve the question. – cyberdantes Apr 23 '20 at 04:56

force a div to contain floated child divs

4 Answers4