Come creare un layout fluido fluido a 3 colonne?

Question

Sto cercando un layout css 3 colonne, con 1 sezione fissa al centro e 2 barra laterale fluido intorno:

http://www.uploadup.com/di-UEFI.png

mezzo ha 250px larghezza (per esempio) e le barre laterali hanno (al minimo) Larghezza 150 px. se la larghezza del browser era superiore a 550 px (250 + 300), le barre laterali dovrebbero avere una larghezza maggiore. (e il mezzo è sempre 250px)

Cosa può fare il CSS? con compatibilità in tutti i browser.

nota: Ho visto this page, ma non so come cambiare per il mio desiderio

Answer 1

Si può provare a utilizzare inline-block s per esso. Sono usati piuttosto raramente, ma a volte sono abbastanza buoni per i layout.

Quindi, guardare a questo: http://jsfiddle.net/kizu/UUzE9/ - con inline-block s è possibile creare layout con qualsiasi numero di colonne fisse e fluide. L'algoritmo:

1. In un primo momento, si aggiunge l'imbottitura pari alla somma di tutte le colonne fisse a l'involucro. Nel tuo caso - 250px.
2. Quindi, si aggiunge min-width al wrapper uguale alla somma della larghezza minima di tutte le colonne fluide.
3. Quindi, si aggiunge white-space: nowrap al wrapper, quindi le colonne non salteranno.
4. E quindi basta aggiungere tutte le colonne di cui hai bisogno.

Se hai bisogno di supporto per IE7 e meno, ci sono alcune cose aggiuntive da sapere tranne che per comune inline-block correzione:

1. è necessario tornare white-space: normal al bambino interiore di una colonna o le colonne vinti rimanere su una linea.
2. In IE può apparire uno scorrimento fantasma, forse c'è un modo migliore per rimuoverlo, ma io uso solo overflow: hidden su qualche wrapper.

Enjoy :)

Answer 2

Se non si utilizza uno dei modelli pronti là fuori,
Si può iniziare con tre div galleggiava a sinistra, al centro con larghezza: 250px e quelle esterne con min-width: 150px
si potrebbe desiderare di sostituirlo con il tag <section>, basta dargli un display: block

Answer 3

per rendere Thi s lavoro in IE6/7 senza JavaScript, il modo più semplice per farlo è con uno table.

Lo so, lo so. Non è che in questo caso il non è valido.

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

testato in IE6/7 + Chrome, e sarà solo di lavoro in tutti gli altri browser moderni.

HTML:

<table id="container" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td id="left">fluid</td> 
     <td id="mid">fixed</td> 
     <td id="right">fluid</td> 
    </tr> 
</table> 

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
    border: 0 
} 
#container { 
    border: 0; 
    table-layout: fixed; 
    width: 100% 
} 
#container td { 
    vertical-align: top 
} 
#mid { 
    width: 250px; 
    background: #ccc 
} 
#left { 
    background: #f0f 
} 
#right { 
    background: #f0f 
}