CSS fluido 'colonna'

Question

cosa è il modo migliore per ottenere questo layout in CSS? immagina di avere tre div, due div all'interno di un'altra .. delle due div interne, la prima ha una larghezza specifica impostata, e il secondo div dovrebbe occupare lo spazio rimanente.

Generalmente sarei andato a finire l'impostazione una larghezza specifica sulla seconda colonna, e gestire l'aggiornamento di questo, alla fine, che la larghezza div contenente cambiato.

Se galleggio il fisso, ma non il fluido, la colonna fluido avvolgere sotto il div fisso (non quello che si vuole).

+-------+ +--------------------------------------+ 
| fixed | |          | 
+-------+ |    fluid     | 
      |          |   
      |          | 
      +--------------------------------------+ 

<div> 
    <div>fixed</div> 
    <div>fluid</div> 
</div> 

Questo deve essere una soluzione completamente css, javascript frameworks- e idealmente funziona sui browser più comunemente utilizzati con il minimo 'hackage' (se non del tutto).

Spero che l'arte ASCII funzioni,

Grazie.

Answer 1

il markup

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

il css

#fixed { 
    float: left; 
    width: 13em; 
    margin-right: -14em; 
} 
#fluid { 
    margin-left: 14em; 
} 

Questo dovrebbe fare il trucco. Lo uso sul mio sito personale. I margini rendono tutto sullo stesso livello.

Answer 2

Speriamo che questo almeno aiuta a iniziare:

* { 
    margin:0; 
} 

div#wrapper { 
    margin:0; 
    height:auto !important; //IE Hack 
    height:100%; //IE Hack 
    min-height:100%; 
    overflow:auto 
} 

div#fixed{ 
    float:left; 
    position:absolute; 
    background-color:red; 
    margin:0; 
    height:200px; 
    width:200px 
} 

div#fluid{ 
    float:right; 
    position:absolute; 
    left:200px; 
    background-color:blue; 
    display:block; 
    height:80%; 
    width:60% 
} 

Il "wrapper" sarebbe la vostra confezione div. Ho solo impostato la colonna del fluido su una larghezza del 60% in modo da poter vedere che dovrebbe agire in modo fluido. Ho provato questo in Opera 10, IE 6 e Firefox 3 con solo piccoli problemi. IE vuole aggiungere 200px in più a destra se si imposta la larghezza della colonna del fluido su 100%. Sono sicuro che ci sia un lavoro da fare da qualche parte.

Answer 3

È possibile utilizzare Emastic CSS Framework che supportano le colonne fluide. Qui Link è un esempio funzionante simile al tuo "lavoro artistico ASCII" :)

Answer 4

In realtà c'è una soluzione ancora più semplice a questa che ho scoperto non molto tempo fa. Funziona bene a IE7. Il div #fluid scorrerà verso l'alto accanto alla correzione fissa e occuperà lo spazio rimanente mantenendo una grande fluidità per tutti i siti reattivi.

#fixed{ 
    width:200px; 
    float:left; 
} 
#fluid{ 
    overflow:hidden; 
}