Diseño html de dos columnas con columna stretch-to-fit

Question

Estoy buscando un diseño de 2 columnas que no sea table que se comporte como un table. y funciona en IE7

http://jsfiddle.net/YGb2y/
esto funciona, pero es una tabla y, como todos sabemos, las tablas no son la opción ideal de diseños. Voy a utilizar si tengo que hacerlo, pero me gustaría encontrar una forma semánticamente más apropiado para hacer esta nota

cómo la columna de la izquierda se estira para adaptarse al contenido que contiene, y la columna de la derecha ocupa el resto del espacio disponible

<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 trató de cambiar esto para usar ul/li/div pero de cualquier I puede establecer una anchura fija o porcentaje columna izquierda. No hay 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; 
} 

Sugerencias?

Answer 1

Esto es lo que terminé yendo con

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 piratear)

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

Answer 2

No puede usar un ancho fijo si no conoce el ancho máximo del contenido.

No puede obtenerlos con un ancho que aún sea flexible sin javascript si usa 1 div por línea.

http://jsfiddle.net/Lp2un/

Answer 3

Se puede especificar el ancho con un valor em en lugar de %, de esa manera que siempre estará en relación con el texto de tamaño, por lo tanto es menos probable que no sea lo suficientemente amplia.

Como alternativa, puede especificar min- y max-width en px para evitar que el diseño se "rompa" demasiado. Los valores reales de estos tendrías que resolver tú mismo.

(en referencia a la regla css .left)

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

O

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

Otra alternativa es demasiado hacen su divs se comportan como una mesa sin llegar a ser una mesa

Ver: http://www.quirksmode.org/css/display.html#table para obtener más información sobre esa idea.

Answer 4

Creo que esto es lo que está buscando, vea updated demo fiddle.

CSS:

#wrapper { 
    overflow: hidden; 
} 
#sidebar { 
    float: left; 
} 
#content { 
    overflow: hidden; 
} 

HTML:

<div id="wrapper"> 
    <div id="sidebar"> 

    </div> 
    <div id="content"> 

    </div> 
</div>