a problem with the floats

hi guys , I needed a help from you people for a problem ..

here it is

<div style="background-color:gray;>

<p> what is this thing in the box</p>
</div>

Code (markup):

when I view this in a browser window the thing displays a paragraph with a gray background.But when I float my <p> element the background color just vanishes .what is the problem .....? can somebody explain me.. I am stuck on this ...

 

I think float is not a valid parameter for p.. use float in div tag.

 

float can be used to any element except for those whose position attribute has been set to absolute or fixed.I am not saying this it's the w3c specifications

 

No idea then.. use the background in p tag.

OR try correcting the below problem..

 

This is a very simple problem. Change the code to this:

<div style="background-color:gray; overflow: hidden;">

<p> what is this thing in the box</p>
</div>

Without overflow:hidden, when you float p, the div will not cover the whole p, instead its height is 0. When you set overflow to hidden, this fixes the problem.

So if you want to preserve the background of the parent of a float, always add overflow:hidden. There are many other ways to achieve the same effect, but this one is the best imho.

 

The thing is whenever we float an element it is taken out of the normal document flow and shifted to the left or right as far as possible .The floated boxes will move to the right or left until their edge meets the containing blocks edges or the outer edge of another float. In this case div acts as a containing block for p ... So when I floated the p it should still be within the div and the div should have accomodated it .How can it's height become zero...?

 

You'd think that, wouldn't you?

Put a border on your div and you'll see the problem in all its glory.

Anyway, a few yet unmentioned solutions (both come with strings attached): 1) Put a float on the div as well. 2) give the div a height.

 

Please see this page:
http://www.ejeliot.com/blog/59
and also make a google search about "containing float css".

 

thanks gary for the wonderful link....

 

Containers do not naturally wrap around their floats, and instead the bottom of the floats "hang out"... it's too bad someone didn't just say that in the first place : )

Be aware that if you had had something on that div like a width or height, IE6 would have indeed wrapped that floated p just like you'd expect. Which would have confused you more : )

So, IE6 wraps floats incorrectly if Haslayout is triggered on the container... and it ignores overflow: hidden. Usually, this is okay-- overflow set to anything other than "visible" wraps floats for your normal browsers and IE6's bug takes care of that.

But there are a few times where it doesn't-- when Haslayout wasn't triggered. So, if you ever start wrapping your floats with overflow: hidden; and find IE6 not wrapping, make sure you've set off Haslayout (there's a list out there at haslayout.net and some other sites).