Float removes color and border from parent

[Bert36]

Hi,

I have 3 div's: container, wrapper and main. Container has a border, wrapper has a background color and main has a border again.

<div id="container">
<div id="wrapper">
<div id="main">
...
</div>
</div>
</div>

Everything looks good in both IE7 and FF2 until I add a float to the main div. When I do, the borders and colors of container and wrapper disapear in FF. Does anyone know why?

Thanks.

[Bert36]

Ok it's late, I'm going to answer my own topic, sorry about that.
Obviously the float will take the div out of the normal flow.

Sorry again.

[coyoteRick]

No apologies needed. :)

If a float is messing up a container, put the following CSS code into the container:

overflow:auto

If this is incorrect usage of the "overflow" property, I would love to know as I've been using it successfully to remedy this problem whenever a float gives me trouble.

[edited by: coyoteRick at 9:45 pm (utc) on July 3, 2007]