3 colonne, centrale con larghezza flessibile

Question

Mi piacerebbe avere un layout composto da tre immersioni adiacenti. I div laterali hanno una larghezza statica (può cambiare via javascript) e il centro div riempie un'area rimanente. Quando le dimensioni della prima div cambiano, influisce solo su quella centrale. È simile alla tabella (con rendering dinamico) costituita da tre colonne.

Ok, ma dov'è il problema. Il problema è che se metto il div floating-left nella prima colonna, e blocco div nel secondo e terzo, i div divs si comportano in modo strano. Sono resi nella loro colonna al di sotto della variabile floating dalla prima colonna.

Un esempio. Nella prima e nella seconda colonna ho div floating e blocco div nella terza colonna. Il div del blocco viene spostato verso il basso all'altezza dei div fluttuanti. Div nella colonna centrale non è spostato nella sua posizione y solo che ha una proprietà flottante a sinistra.

Mi piacerebbe che ciascuna delle tre divisioni di layout fosse indipendente l'una dall'altra. Non ho idea del perché gli elementi nella terza colonna galleggiano div nelle prime due colonne (con la proprietà float).

CODICE:

<div style="margin: auto; display: table; width: 260px;"> 
     <div style="display: table-row;"> 
      <div style="display: table-cell; width: 100px;"> 

       <div style="float: left; width: 40px; height: 50px;">COL1</div> 

      </div> 
      <div style="display: table-cell;"> 

       <div style="float: left; height: 50px; width: 40px;">COL2</div> 

      </div style="display: table-cell; width: 100px;"> 
      <div class="sideContainer"> 

       <div>COL3</div> 

      </div> 
     </div> 
</div> 

e risultato: result

Come risolvere questo. Come rendere tutti i div di layouting (colonne) indipendenti l'uno dall'altro. Qualche idea?

Answer 1

È possibile farlo spostando col1 e col3 a sinistra e a destra, con una larghezza fissa.

Quindi aggiungere un margine sinistro e destro a col2 uguale alla larghezza di col1 e col3.

Questo ti dà tre colonne; col1 e col3 avente una larghezza fissa e col2 riempiendo la larghezza disponibile:

(casella contenuti col2 in blu, e suoi margini in giallo)

<div class='container'> 
    <div class='right'> 
     col3 
    </div> 
    <div class='left'> 
     col1 
    </div> 
    <div class='middle'> 
     col2 
    </div> 
</div> 



.container { 
    overflow: hidden; 
} 
.right { 
    float: right; 
    width: 100px; 
} 
.left { 
    float: left; 
    width: 100px; 
} 
.middle { 
    margin: 0 100px; 
} 

Prova qui: http://jsfiddle.net/22YBU/

BTW se avete bisogno di display: tabella, display: tabella-row e display: table-cell, usate un tavolo ;-)