Image in floated div NN 4.x

[nmknmk]

Hi all,

I have the following problem. I have a 2 column layout like this (simplified):

#menu{
 float: left;
 width: 40%;
}
#content{
 float: left;
 width: 60%;
}

The menu comes forts on the page, so it gets to be the left column.

I want to place an image and some text below it in the content div. In all browsers except NN 4.x it works with no problems. In NN the image lies on the text. What is wrong and is there a way to remedy the sutiation?

Sidenote: If I place the image below the text it gets cut off by the end of the div. I also added a div with clear:both as a property between the image and the end of the content div, but it made no difference.

Many thanks in advance,
nmknmk

[rainborick]

According to Eric Meyer's handy Browser CSS Compatibility Chart, NS v4.x's support of float is buggy, so its unlikely there's a direct workaround. But sometimes you can at least get the information to the user by hiding the stylesheet (or at least the problem sections) from NS v4.x by using @import and letting the browser render the underlying HTML as best it can. Alternatives that also come to mind are initially using position:absolute; on these items and then update them to include a float:left in the @import stylesheet. Or you can make the HTML invisible to NS v4.x (and only NS v4.x) by surrounding it with <nolayers></nolayers>. It won't validate, but it works.