HTML/CSS Dos columnas de auto-ancho

Question

Estoy teniendo un momento muy difícil lograr el efecto siguiente:

========================================================== 
= Variable Width = <input style="width: 100%" />  = 
========================================================== 

Estoy utilizando el código HTML siguiente:

<dl> 
    <dt> 
    <label>Variable Width</label> 
    </dt> 
    <dd> 
    <input style="width: 100%" /> 
    </dd> 
</dl> 

Tenga en cuenta que yo Recortó el HTML para facilitar la lectura.

¿Alguien puede sugerir qué CSS debería utilizar para lograr este efecto? Preferiría no tener que usar display: table porque estoy buscando compatibilidad entre navegadores que llegue a IE7.

Answer 1

Esto es "increíblemente difícil" de hacer sin <table> o display: table .. hasta que sepa cómo hacerlo!

Ver:http://jsfiddle.net/thirtydot/aLgwt/

Esto funciona en IE7 y una mayor + todos los navegadores modernos.

dt { 
    float: left 
} 
dd { 
    overflow: hidden; 
    padding: 0 4px 0 9px 
} 
dd input { 
    width: 100% 
} 

Una explicación de por qué funciona is here.

Answer 2

Por cierto, si usted quiere tener la columna de la derecha fija, sino el de la izquierda con la auto-con que puede cambiar este patrón para:

CSS:

dt { 
    float: right; 
} 
dd { 
    overflow: hidden; 
    padding: 0 4px 0 9px; 
} 
dd input { 
    width: 100% 
} 

Aviso, que label debe seguir antes input de todos modos.