Floating div drops with long text in Firefox (CSS Issue)

[rblaettler]

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?

[drhowarddrfine]

As usual, IE is wrong. Never use IE as a reference for how things should work.

You've set the <li> as 100% width. When you narrow it down, it has to make things fit inside so it drops the text to the next line. What IE is doing is a bug in IE.

[David Laakso]

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.

The IEs get it wrong.Code to compliant browsers. Fix the IEs.

The construct of the division needs to be changed [1]. The list is not needed and is extraneous and unnecessary markup-- that is, unless of course, I have completely misunderstood what you're trying to accomplish.
[1] Plese see amended division construct
PS
Given the uri is provided, as yours was, it is not necessary to post the code to the forum-- anyone can open the document to view the markup and css. More important, validate your markup before posting a question about (x)html/css. Thanks.

[rblaettler]

Sorry about the validation. I just quickly put together a simplyfied example. I posted the code so that "future generation" can still get the idea. It's always unfortunate if you find the solution to a problem, but the link is not working anymore.

Anyway, what I'm trying to achive is some flexible table like structure. The app also has to work on the iPhone afterwards and most iPhone navigation examples work with lists. So I based my design on a list too.

Since it's only text and not one long character, I would have hoped that it would word wrap the text before it drops the div down.
What can I do to achive that without fixed width or absolute positioning?

[drhowarddrfine]

It will word wrap. Just not the way you have it. Don't have time to show an example right now.

[rblaettler]

An example would help :-)
Or a hint on what I'm doing wrong?

[David Laakso]

Since it's only text and not one long character, I would have hoped that it would word wrap the text before it drops the div down.
What can I do to achive that without fixed width or absolute positioning?

Please forgive me, but this entire thread is about as clear as mud. As may be this suggestion: use a "table like" (no width specified) definition list?
Aside: My piece of garbage (personal opinion) iPhone has no difficulty rendering what I suggested a couple of days ago, or with the above suggestion for the use of a "table like" definition list where no width is specified.

[rblaettler]

Thanks for the hint about the definition list. I've created an example with that approach, which works fine in FF, but has some issues with IE. Sometimes it does it side by side and sometimes it drops all rows. Depends on the width of the window.

Is there really no solution with my initial list approach? We do have the iPhone as the standard phone in my company, so it's not really my decision.

[David Laakso]

Is there really no solution with my initial list approach? We do have the iPhone as the standard phone in my company, so it's not really my decision.

Nothing is impossible: depending whether or not "your company" can live with the consequences-- in this case, widths are needed, a lot of code is necessary, and hacks from here to Havana are required to get the right column to come even close to holding in the IEs. This [1] is a modification, I took the liberty to make, on a test case example somewhat similar to yours by Alex Robinson . Further modification is on you. Incidentally, Alex makes it clear on his site that he does not provide answers or solutions to problems.
[1] float drop in Internet Explorer with long text