HTML/CSS Due colonne di auto-larghezza

Question

Sto avendo un tempo incredibilmente difficile raggiungere il seguente effetto:

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

Sto usando il seguente codice HTML:

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

Si prega di notare che ho 'ho rifilato il codice HTML per la leggibilità.

Qualcuno può suggerire quale CSS dovrei usare per ottenere questo effetto? Preferirei non dover utilizzare display: table perché sto cercando una compatibilità cross-browser che raggiunga IE7.

Answer 1

Questo è "incredibilmente difficile" da fare senza <table> o display: table .. finché non si sa come!

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

Questo funziona in IE7 e una maggiore + tutti browser moderni.

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

Una spiegazione del motivo per cui funziona is here.

Answer 2

A proposito, se si vuole avere la colonna di destra fissa, ma quella di sinistra con l'auto-con è possibile modificare questo modello per:

CSS:

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

Avviso, che label dovrebbe seguire prima input comunque.