CODEWITHSUNDEEP
htmlcsscss-float
Bogdan Verbenets
Bogdan Verbenets

Reputation: 26952

float:left question

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

Answers (3)

BoltClock
BoltClock

Reputation: 724542

#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

methyl
methyl

Reputation: 3322

Just set 

#div1{
    overflow:hidden;
}

Or add

<br style="clear:both" />

just before #div1 closing tag.

Upvotes: 2

JoeCianflone
JoeCianflone

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

Related Questions