Question

I am attempting to recreate a table using block elements (in this case an unordered list). I want one of those items to fill the parent element. This was very easy in tables. I’d just set the table to be 100% and not specify a width of whichever cell I’d like to fill the parent. How can I do this with block elements?

With tables it’s easy:

<table width="100%" border="1">
    <tr>
        <td width="200">200px</td>
        <td>nice wide column which fills the page</td>
        <td width="100">100px</td>
    </tr>
</table>

But using list items

<style>
    ul { 
        list-style-type: none; 
        padding-left: 0px; 
    }
    li { 
        float: left; 
    }
    .col1 { width: 200px; } 
    .col2 { } /* width: 100% doesn't work */ 
    .col3 { width: 100px; }
</style>

<ul>
    <li class="col1">200px</li>
    <li class="col2">tight column wrapping around this text</li>
    <li class="col3">100px</li>
</ul>

How can I make that center “column” fill the page?

Answer 1

How about this?

ul {
    display: inline-table;
}
li {
    display: table-cell;
}
.col1 {
    width: 200px;
}
.col2 {
}
.col3 { 
    width: 100px; 
}​

Proof it works: http://jsfiddle.net/zLvz5/