Floated lists in a div - IE 7

Question

I have some page elements which are meant to appear in a two column list.

  <ul id="modules" class="module_container"><!-- begin modules -->
    <li>
      <div class="single left" id="component_194"><!-- begin component -->
        <p>Excepteur sint occaecat cupidatat...</p>
      </div><!-- end component -->
    </li>
    <li>
      <div class="single right" id="component_195"><!-- begin component -->
        <p>Ut enim ad minim veniam...</p>
      </div><!-- end component -->
    </li>
    <li>
      <div class="double" id="component_111"><!-- begin component -->
        <p>Lorem ipsum dolor sit amet...</p>
      </div><!-- end component -->
    </li>
  </ul><!-- end of modules -->

I'm using a jQuery to allow users to sort the order of boxes on the page. Some boxes are two columns wide, and some single columns (hence the classes).

The CSS works beautifully in Firefox...

  <style type="text/css" media="screen">
  #modules {
    width: 584px;
  }

  #modules li {
    list-style: none;
    float: left;
    overflow: hidden;
  }

  #modules li div {
    border: 1px solid #999;
    margin: 10px;
    padding: 10px;
    height: 120px;
    overflow: auto;
    width: 542px;
    clear: both;
  }

  #modules li div.single {
    width: 250px;
    clear: none;
  }

  #modules li.placeHolder div {
    border: 1px dotted #999;
    width: 250px;
  }
  </style>

... but if I have a single box followed by a double-box in IE 7, the double box doesn't wrap to the next row so to speak. I have an older version that uses the <li> elements to wrap two single items into one <li>,double items into a <li> on their own, and (via PHP) where necessary single items into a <li> between two double boxes... but hooking and un-hooking this via jQuery to allow users to drag and drop items around on the page fiddly.

So, long story short: is there a fix for IE7 to get it to behave like FireFox?

Kind regards, Lost Cause Dept.

UPDATE:

Thanks to having the idiocy of floating the lis and then worrying about the divs pointed out to me, I came up with the following:

  #modules {
    width: 600px;
    border: 1px solid #999;
    overflow: hidden;
    padding: 0;
  }

  #modules li {
    list-style: none;
    overflow: hidden;
  }

  #modules li div {
    border: 1px solid #999;
    margin: 10px 0 0 10px;
    padding: 10px;
  }

  #modules li.placeHolder div {
    border: 1px dotted #999;
    width: 290px;
  }

  #modules li.double { 
    width:580px; clear:both;
  }

  #modules li.single { 
    width:290px; float: left;
  }

... and ...

<ul id="modules" class="module_container"><!-- begin modules -->
  <li class="single">
    <div id="component_194"><!-- begin component -->
      <p>Excepteur sint occaecat cupidatat...</p>
    </div><!-- end component -->
  </li>
  <li class="single" >
    <div id="component_195"><!-- begin component -->
      <p>Ut enim ad minim veniam...</p>
    </div><!-- end component -->
  </li>
  <li class="double" >
    <div id="component_111"><!-- begin component -->
      <p>Lorem ipsum dolor sit amet...</p>
    </div><!-- end component -->
  </li>
  <li class="single" >
    <div id="component_195"><!-- begin component -->
      <p>Ut enim ad minim veniam...</p>
    </div><!-- end component -->
  </li>
  <li class="double" >
    <div id="component_111"><!-- begin component -->
      <p>Lorem ipsum dolor sit amet...</p>
    </div><!-- end component -->
  </li>
</ul><!-- end of modules -->

... which handle it really neatly (I think). Makes it possible to have 1 long single item next to multiple shorter single items.

Answer 1

Your lis are floating. Try specifying the clearing and width on the lis, not the divs inside:

li.double { clear:both; width:500px; }
li.single { width:249px; }

<li class="double"></div>

Answer 2

IE needs for you to define everything or it will define it for you (and you won't like the result)

if you want 1 li to float next to the other you will need to define the width, either in hard code CSS or with jQuery by measuring the inner content and setting the parent's width according to that.