title: Why are these Div tags not nesting properly?
body: <p>If anyone can give any insight here it would be very much appreciated. I want to create output that shows reservations in fitness classes on various dates.  The idea is to have three across and however many rows are needed to cover all of the dates. To do this, I'd like to use CSS rather than resorting to tables.</p>
  
  <p>Ok, so I have the following CSS definitions:</p>
  
  <pre><code>.ListSetContainer 
  { 
    background-color:Red;
    border:1px solid #999999;
    text-align:center;
  }
  
  .ListSet
  {
    margin: 2px 2px 2px 16px;
    float: left;
    clear:none;
  }
  
  .ListSet ul 
  {
    background-color: #EEEEEE;
    border: 1px solid #999;
    margin: 2px 2px 16px 2px;
    padding: 6px 6px 0px 6px;
  }
  </code></pre>
  
  <p>And the following HTML:</p>
  
  <pre><code>  &lt;div style="clear:both;"&gt;
      &lt;h4&gt;Class Dates, Counts and Participants&lt;/h4&gt;
      &lt;div class='ListSetContainer'&gt;
        &lt;div class='ListSet'&gt;
          &lt;ul&gt;...{Class information here...}
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class='ListSet'&gt;
          &lt;ul&gt;...{Class information here...}
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class='ListSet'&gt;
          &lt;ul&gt;...{Class information here...}
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;  -- End of First ListSetContainer
  
      &lt;div class='ListSetContainer'&gt;
        &lt;div class='ListSet'&gt;
          &lt;ul&gt;...{Class information here...}
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class='ListSet'&gt;
          &lt;ul&gt;...{Class information here...}
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;  -- End of Second ListSetContainer
    &lt;/div&gt;  -- End of surrounding Div
  </code></pre>
  
  <p>But rather than getting three divs arranged horizontally, followed by a second row with two divs, I'm getting this:</p>
  
  <p><a href="http://www.bsdi.cc/images/divproblem.png" rel="nofollow noreferrer">Linked Image</a></p>
  
  <p>A few notes.  First, notice that the hierarchy in the HTML (ListSetContainer divs contain the ListSet divs) is not reflected in the output.  Second, the ListSetContainer div is only one pixel high - there is no background shown! (I'm using a Red background just to be sure I don't miss it).  The whole enclosing div is just squashed down and the inner divs are floating out on their own. Setting the height manually doesn't work because the inner div with the list is variable height (and it looks odd, to boot).  If I remove the float:left; from the inner divs, they expand to be the full width of the screen and thus I cannot get three in a row.  So...I'm at a loss.</p>
  
  <p>Again, thanks for any help you can offer!</p>