Elements that don't take their children's width or height

Question

I have run across this problem from time to time and have never been able to understand what causes it.

<div id="wrapper">
    <div id="primary">content</div>
    <div id="secondary">content</div>
 </div>

#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}

And then you look at the properties on Chrome's inspect element and the wrapper div shows up as 0px height and 0px width.

Chrome calculates the width and height fine for me. The computed style for #wrapper shows as `display: block;height: 40px;width: 645px;` — j08691, Apr 29 '13 at 21:13
possible duplicate of [How do you keep parents of floated elements from collapsing?](http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing) — Quentin, Apr 29 '13 at 21:27
Alternative solution by positioning absolute: http://jsbin.com/arayer/4/edit . (You can also collapse your CSS by setting `#wrapper div {width: 50%;}` — webketje, Apr 29 '13 at 23:31

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

This is commonly referred to as the clearfix issue. An alternative to placing an inline-styled div below would be to assign overflow:hidden to the wrapper div.

For more information about clearing issues, check out A List Apart: CSS Floats 101 (Section 6: Collapsing specifically)

edited May 23 '17 at 12:28

Community

1
1

answered Apr 29 '13 at 21:14

oomlaut

763
4
12

score 1 · Answer 2 · answered Apr 29 '13 at 21:11

You need to add a <div style='clear:both'></div> below the <div id='secondary'/>. The CSS tag "float" does not allow the parent to see where the children actually end. Adding the div that clears the left and right sides of any floats allow the parent element to fill the space correctly.

score 0 · Answer 3 · answered Apr 29 '13 at 22:09

You need to try and clear the div with the float, so try these, adding a <div> after the second div, and adding style="clear:both" to the div i just said to create as the style, or you can simply specify the exact height & width of the wrapper div, let me know what happens please. good luck!

Elements that don't take their children's width or height

3 Answers3