How do I grow a contained floated element to the full height of its container?

Question

I'll ask the basic question first and then go into excruciating detail as to why I'm asking. I have a bunch of similar floated block elements inside a <div> and I've set overflow:auto on the <div> so that its height expands to properly contain all of the elements inside it.

Is there any way, using CSS and HTML only, to set only the first floated element to the full height of the div?

Just to be clear: I want to grow the contained element to the height of the container, not the other way around.

I tried adding

 height: 100%

to the first floated element's CSS, but that has no effect.

On to the excruciating detail. And if a better overall approach comes to mind, which would eliminate this particular problem, I'm all ears.

I'm simulating a table with a bunch of floated <ul> elements inside a <div>. Each list is a column in the "table" and the first list is the row-label column. So, to render the following:

         col A     col B
row 1     foo       baz

row 2     bar       bat

I use this markup:

<div>
    <ul class='row-label'>
        <li>&nbsp;</li> *
        <li>row 1</li>
        <li>row 2</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col A</li>
        <li>foo</li>
        <li>bar</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col B</li>
        <li>baz</li>
        <li>bat</li>
    </ul>
</div>

* there's supposed to be a non-breaking space in the first item of the 'row-label' list but I can't get SO to show  

Attentive readers may be wondering "Huh? Why not use a real table?" Two answers:

• My fake-table approach is much more appropriate, semantically, for my data. The data is more closely related within each "column" than within each "row", but HTML tables assume the opposite. So I would need more complex PHP on the backend to convert the data into HTML tables, and the result wouldn't make as much sense. The "table" here really is more of a visual/presentation effect than anything.

• I wanted to leave open the ability to manipulate individual columns in JavaScript (show them and hide them in response to user action, with transition effects). From what I could tell when I was researching it, there's no straightforward way to do this in a standard HTML table -- precisely because the row, not the column, is the basic unit of the HTML table. Please shoot me a counter-example if I'm wrong.

The CSS, simplified, looks like this:

div {
    overflow: auto;
}

div ul {
    float: left;
    list-style-type: none;
    padding: 0;
    margin: 0 0.5em;
}

A problem arises when a row has more columns than will fit in the width of the browser window. The columns wrap to the next line and I get this sloppy result:

         col A     col B     col C
row 1     foo       baz       bar

  col D     col E
   zab       oof

Ultimately I have a better solution in mind but the simplest immediate fix is to give the row-label column enough height to push those wrapped columns into line. If I do something like this:

ul.row-label {
     height: [lots of ems]
}

Then I get this result:

         col A     col B     col C
row 1     foo       baz       bar

         col D     col E
          zab       oof

But since there can be more of these simulated tables below the first one, and since there can be any number of rows in each "table", I can't rely on an absolute height.

Answer 1

Firstly, and as you pointed out, your REALLY SHOULD be using tables for tabular data. You can perform exactly the same manipulations on the elements in a table as you can anywhere else.

I dont know why you would want to do such a crazy thing, but your best bet is to just put the .data-col elements in a separate div, add a left margin, and position them to the left:

EDIT: code added for my sanity

ul, li {
  display: block;
  margin: 0px;
  padding: 0px;
}
ul {
  float: left;
  margin: 0px 5px;
}
li {
  height: 20px;
}
.data-cols {
  left: 0px;
  margin-left: 50px;
  overflow: hidden;
}

<div>
    <ul class='row-label'>
        <li> </li>
        <li>row 1</li>
        <li>row 2</li>
    </ul>
    <div class="data-cols">
        <ul class='data-col'>
            <li class='data-header'>col A</li>
            <li>foo</li>
            <li>bar</li>
        </ul>
        <ul class='data-col'>
            <li class='data-header'>col B</li>
            <li>baz</li>
            <li>bat</li>
        </ul>
    </div>
</div>

Answer 2

May be this would help with ideas? I just found this css framework myself:

http://www.blueprintcss.org/