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>