Floats and bg images disappearing

Problem with Firefox, fine in IE ...

[sherpa99]

This is a strange CSS bug I discovered on late Friday -- I can't figure it out.

My page is basically a 2-column layout. The left side is a nav menu, which is floated to the left ... to the right is a div (a "content area") which is positioned relative with a margin on the left to move it over to the right of the nav menu. Both of these divs are nested inside of a "middleContainer" div that has the 1 px tall 760px wide background image tiled vertically (it's a long wide sliver).

When the nav menu is taller than the content area, the background image of the "middleContainer" disappears.

It's fine in IE and fine in both browsers when the content div is taller that the menu. Weird!

Any ideas?

<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

[edited by: SuzyUK at 11:50 am (utc) on Nov. 15, 2004]

[createErrorMsg]

sherpa, this not a bug, but simply a case of compliant browsers doing things the right way and IE doing it wrong.

Because floats are removed from document flow before being moved in their float direction, they are unable to influence the height of their containing block. This is how float was intended to work in the specs, but IE implements the property wrong and instead automatically encloses a floated element inside it's container. Thus, in IE, your container's height is influenced by the float, but not in Moz/FF.

To force Moz/FF to enclose the floated left div, simply apply a float value to the container itself. Don't forget to give it a width, as well.

cEM