Reputation: 26912
I have stuff like:
<div id="div1">
<div style="float:left;width:100px;height:100px;"></div>
</div>
And the div1 appears to have 0x0 size instead of 100x100. Why?
Upvotes: 1
Views: 117
Reputation: 724392
#div1
isn't floated itself, so it doesn't appear to contain the inner div
. Floating takes an element out of normal flow, so #div1
sort of isn't aware of its child anymore.
To make it do so, you need to float #div1
too, or give it overflow: hidden
to make it contain its inner div
's float (or use a clearfix).
Upvotes: 7
Reputation: 3322
Just set
#div1{
overflow:hidden;
}
Or add
<br style="clear:both" />
just before #div1 closing tag.
Upvotes: 2
Reputation: 682
Clear the float:
http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats/
Update:
A List Apart has a good article on this type of thing: http://www.alistapart.com/articles/css-floats-101/
From the article:
...floated elements are originally calculated in the normal flow and then removed, the #container element doesn’t consider it within its bounds and therefore acts as if it isn’t even there..
Upvotes: 3