Why are these Div tags not nesting properly?

Question

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.

Ok, so I have the following CSS definitions:

.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;
}

And the following HTML:

  <div style="clear:both;">
    <h4>Class Dates, Counts and Participants</h4>
    <div class='ListSetContainer'>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
    </div>  -- End of First ListSetContainer

    <div class='ListSetContainer'>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
    </div>  -- End of Second ListSetContainer
  </div>  -- End of surrounding Div

But rather than getting three divs arranged horizontally, followed by a second row with two divs, I'm getting this:

Linked Image

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.

Again, thanks for any help you can offer!

Answer 1

Your ListSetContainer needs to contain some non-floated content for it to hava a height/width. Floating an element takes it out of the normal layout hierarchy and thus the container, containing only the ListSets, doesn't contain anything that gets rendered normally. Add a non-breaking space to the container, then you should be able to set its width/height as there will be something in it to render.

I would also have your ListSetContainer use clear: both. This should make it start a new "row" of ListSets.

Answer 2

Use clear:both for the .ListSetContainer block.

But you still can improve this using just one list:

<style type="text/css">
    .ListSetContainer {
     list-style: none;
     padding: 0;
    }
    .ListSetContainer li {
     width: 33.333%;
     float: left;
    }
    .ListSetContainer li li {
     width: auto;
     float: none;
    }
</style>
<ul class="ListSetContainer">
    <li><ul><li>...{Class information here...}</li></ul></li>
    <li><ul><li>...{Class information here...}</li></ul></li>
    <li><ul><li>...{Class information here...}</li></ul></li>
    <li><ul><li>...{Class information here...}</li></ul></li>
    <li><ul><li>...{Class information here...}</li></ul></li>
</ul>

Answer 3

The problem lies in the fact that your ListSet class needs "display: block;" adding or "float:left;" removing and if adding the block then add "display: block; width:100%" to the ListSetContainer class.

Answer 4

It's because the ListSetContainer doesn't have a set width. i expect that they'd all fit on one row on a widescreen monitor.

You could try:

.ListSetContainer {
    width: 300px;
}

.ListSet {
    clear: none;
    float: left;
    width: 100px;
}

And style as appropriate.

Answer 5

You are presenting tabular data with a fixed set of columns--one per month. Sounds like what tables were supposed to be used for. Now is your chance to use tables and not feel guilty about doing so!

Now, if you aren't going to use tables, you should be fixing the size of each element, but not the number of elements per row. Let the number of columns be determined by the size of the browser window.

Failing all that, I think you need a clear: both between each row.