Two column html layout with stretch-to-fit column

Question

I am in search of a 2 column non-table layout that behaves like a table. and works in IE7

http://jsfiddle.net/YGb2y/
this works but it's a table and as we all know, tables are not the ideal option of layouts. I'll use it if I have to, but I'd like to find a more semantically appropriate way to do this

note how the left column stretches to fit the containing content, and the right column takes up the rest of the available space

<table>
    <tr><td class="left">12345</td><td class="right">...</td></tr>
    <tr><td class="left">123456</td><td class="right">...</td></tr>
    <tr><td class="left">1234567</td><td class="right">...</td></tr>
    <tr><td class="left">12345678</td><td class="right">...</td></tr>
    <tr><td class="left">123456789</td><td class="right">...</td></tr>
    <tr><td class="left">1234567890</td><td class="right">...</td></tr>
</table>

table
{
    width:100%;
}
.left
{
    width:1px;
    background-color:blue;
    color:white;
}
.right
{
    background-color:gray;
}

I tried to change this to use ul/li/div but I can either set a fixed width or percentage left column. There's no width:stretch-to-fit.
http://jsfiddle.net/cj6PR/

HTML

<ul>
    <li><div class="left">12345</div><div class="right">...</div></li>
    <li><div class="left">123456</div><div class="right">...</div></li>
    <li><div class="left">1234567</div><div class="right">...</div></li>
    <li><div class="left">12345678</div><div class="right">...</div></li>
    <li><div class="left">123456789</div><div class="right">...</div></li>
    <li><div class="left">1234567890</div><div class="right">...</div></li>
</ul>

CSS

ul
{
    list-style:none;
    width:100%;
}
li
{
    clear:both;
    position:relative;
    overflow:hidden;
}
li div
{
    padding:5px;
}
.left
{
    float:left;
    width:20%;
    background-color:blue;
    color:white;
}
.right
{
    background-color:gray;
}

Suggestions?

Answer 1

This is what I ended up going with

http://jsfiddle.net/cj6PR/4/

HTML

<ul>
    <li><div class="left">12345</div><div class="right">...</div></li>
    <li><div class="left">123456</div><div class="right">...</div></li>
    <li><div class="left">1234567</div><div class="right">...</div></li>
    <li><div class="left">12345678</div><div class="right">...</div></li>
    <li><div class="left">123456789</div><div class="right">...</div></li>
    <li><div class="left">1234567890</div><div class="right">...</div></li>
</ul>

CSS

ul
{
    display:table;
    width:100%;
}
li
{
    display:table-row;
}
li div
{
    display:table-cell;
}
.left
{
    width:1px;
    background-color:blue;
    color:white;
}
.right
{
    background-color:gray;
}

JS (IE7 hack)

if ($.browser.msie && $.browser.version == 7)
{
    $("ul").wrapInner("<table />");
    $("li").wrap("<tr />");
    $("li div").wrap("<td />");
}

Answer 2

You can't use a fixed width if you dont know the max width of the content.

You can't get them to one width that is still flexible w/o javascript if you use 1 div per line.

http://jsfiddle.net/Lp2un/

Answer 3

You could specify the width with a em value rather than %, that way it'll always be relative to the text-size, thus less likely to not be wide enough.

Alternatively you can specify a min- and a max-widthin px to prevent the layout from 'breaking' too much. Actual values of these you'd have to figure out yourself.

( referring to your .left css rule )

.left {
    float:left;
    width:15em; /* or any other value that you consider wide enough */
    background-color:blue;
    color:white;
}

Or

.left
{
    float:left;
    width:20%;
    min-width: 125px; /* whatever suits your needs */
    max-width: 150px; /* whatever suits your needs */
    background-color:blue;
    color:white;
}

One other alternative is too make your divs behave like a table without actually being a table

See: http://www.quirksmode.org/css/display.html#table for more information on that idea.