height in netscape

[styleBunny]

Hi folks,

http://members.optusnet.com.au/apcw/news/

i have an empty div that is set to height:100%; using CSS, that holds the the two divs in the orange area and the two divs in the pink area. The empty div is used twice and can be seen as the the bright purple area, and is used to make it appear as if both colums are the same length(when i make all the divs the same color that is).

This works well in IE, but netscape dont seem to recognise the empty holder div? Is there something fundamentally wrong with my approach to css formatting?

all the css code is within the index file itself.

Cheers
Paul.

 

[Vragabond]

Actually, it is. IE is interpreting css wrongly. W3C explains that:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like 'auto'.

Auto would mean that it is as high as elements inside. But here is another problem. Elements that float (have float property set) are taken out of the normal flow and thus do not expand the parent. What you could do is put dummy divs at the end of your floating divs with property clear: both; This could solve your problem. This is also why you have the floating footer (footer floats right below the banner) problem in Mozilla. Try to fix the div containers by adding dummy divs that clear both at the end of floating elements.