Div with float style hiding parent div background color

13 March 2009 6,409 views 3 Comments

Lets start with this code:

<div style=”background:blue;”>

<div style=”float:left;”>some inner div content…</div>

</div>

You might expect the parent div with blue background spanning the width with the inner div content. In reality thats not the case. You would find that there is no parent div with blue background on browser screen. You will see the default background color for <body> or the background color you have set for <body>.

We were expecting to see a left float div content with the parent div filling to the right with the background color.

Why is this happening? When we place any element with left or right float in a div, the parent acts like it did not have anything in it. Meaning it acts like an empty div <div></div>; and since it acts like there is nothing in it it would show 0 height. In other words float elements are taken off the flow.

Solution?

Solution 1: Inside parent div set a div with style clear:both; after the div with float style. That will ensure the parent div retrieve space after the float:left element.