I have two div's with a float:left attribute that I've put into a list. They should align horizontally, which they do as long as the text in them does not need to be wrapped. As soon as the area for the float gets too small, IE wraps the text, but FF drops the div below the other before it starts to wrap the text. This is not exactly what I want. I could use absolute positioning, but that leads to other issues and is not really what I wanna do anyway. The simplified example page is below and core code too:
http://remy.supertext.ch/uploads/floatproblem.html
You can see the effect if you narrow the Window in FF and in IE. It works in IE7 as expected.
- <style type="text/css">
-
-
ul.GenericList
-
{
-
list-style: none;
-
width: 100%;
-
}
-
-
ul.GenericList li
-
{
-
clear:both;
-
width: 100%;
-
}
-
-
-
ul.GenericList div
-
{
-
float: left;
-
}
-
-
</style>
-
-
<ul class="GenericList">
-
<li style="">
-
<div >
-
<div style="background-color:Yellow;">Test</div>
-
<div style="background-color:Aqua;">
-
<b>Short Text</b><br />
-
</div>
-
</div>
-
</li>
-
<li style="">
-
<div >
-
<div style="background-color:Yellow;">Test</div>
-
<div style="background-color:Aqua;">
-
<b>Short Text</b><br />
-
</div>
-
</div>
-
</li>
-
<li style="">
-
<div >
-
<div style="background-color:Yellow;">Test</div>
-
<div style="background-color:Aqua;">
-
<b>Long Text and very long Text. Long Text and very long Text. Long Text and very long Text.</b><br />
-
</div>
-
</div>
-
</li>
-
</ul>
Any ideas?
