Float Clearing Problem in IE6 - They're Clearing By Themselves!

Question

I'm building a page that has a UL list with its items floated to create 2 columns. See http://epraxadev.com/valencia/food_truck_festival/index2.php

It works perfectly in Firefox, Chrome, Safari, IE8, and IE7. The only problem is in IE6. In IE6, instead of the list elements stacking in neat 2-row columns, with the thumbnail floated to the left and the description of the thumbnail floated to the right, the description somehow magically clears the floated thumbnail. Odd!

Here's the markup

<ul id="theTrucks">
<li>
    <a class="thumb"><img src="images/trucks/dim-sum.png" width="78" height="79" alt="Dim Sum" /></a>
    <div class="details">
        <p>The Dim Sum Truck brings ample amounts of steamed shu mai and har gow dumplings, baked BBQ pork buns and more.</p>
        <ul>
            <li><a href="#" target="_blank">Website &raquo;</a></li>
            <li><a href="#" target="_blank">Facebook &raquo;</a></li>
            <li><a href="#" target="_blank">Twitter &raquo;</a></li>
        </ul>
    </div>
</li>

<li>
    <a class="thumb"><img src="images/trucks/border-grill.png" width="78" height="79" alt="Border Grill" /></a>
    <div>
        <p>The Border Grill Truck serves gourmet tacos, quesadillas, ceviches and more.</p>
        <ul>
            <li><a href="#" target="_blank">Website &raquo;</a></li>
            <li><a href="#" target="_blank">Facebook &raquo;</a></li>
            <li><a href="#" target="_blank">Twitter &raquo;</a></li>
        </ul>
    </div>
</li>

<li class="clear"></li>

...repeats 

And here's the CSS:

<style type="text/css">
ul#theTrucks    { margin:1em 0 0; padding:0; }
ul#theTrucks li { width:320px; float:left; display:inline; margin-right:11px; list-style:none; overflow:hidden; }
ul#theTrucks li a.thumb { float:left; display:inline; width:78px !important; height:79px; margin:0; }
ul#theTrucks li div { width:230px; float:left; display:inline; padding:0; margin:0 0 0 11px; }
ul#theTrucks li div p   { margin-bottom:0.5em; font-size:11px; line-height:1.2; }
ul#theTrucks li div ul  { padding:0; margin:0; list-style:none; font-size:11px; line-height:1.2; }
ul#theTrucks li ul li   { list-style-type:none; margin:0; }

ul#theTrucks li.clear { width:100%; float:none; display:block; margin:0; height:50px; clear:both; }
</style>

<!--[if lte IE 6]>
<style type="text/css">
ul#theTrucks li div { width:100px; clear:none; }
</style>
<![endif]-->

Note the IE6-specific style that makes the div only 100px, so I know it's not because the containing li (at 320px) is too small to contain it.

Answer 1

Figured out the problem. The innermost unordered-list <li> tags were inheriting the width of the container <li> tags, which was 320px. I set the inner <li>s like so:

ul#theTrucks li ul li   { width:230px; margin:0; }

and ta da! No more alignment issues =D

Answer 2

http://www.thedimsumtruck.com/Index/Home.html is a frigging mess! You can barely scroll the page in IE8.