Come rendere il layout a 3 colonne con centro fluido senza galleggianti

Question

Sto cercando di creare un layout a tre colonne, con barre laterali a larghezza statica e una colonna centrale fluida. NON voglio che le colonne scendano quando la pagina diventa troppo stretta (colonna centrale a 250px), mi piacerebbe che l'intera cosa si congeli e utilizza lo scorrimento laterale. Abbastanza sicuro che questo non può essere fatto con i galleggianti. Ecco quello che ho finora:

http://jsfiddle.net/eNDPG/210/

HTML:

<div id="header"> 
    Header 
</div> 
<div id="container"> 
<span id="leftcol"> 
    Text1 
</span> 
<span id="rightcol"> 
    Text3 
</span> 
<div id="centercol"> 
    Text2 
</div> 
</div> 
<div id="footer"> 
    Footer 
</div> 

CSS:

#container { 
overflow:hidden; 
width: 100%; 
float: left; 
} 

#leftcol { 
border: 1px solid #0f0; 
display: inline-block; 
float: left; 
width: 200px; 
} 

#rightcol { 
border: 1px solid #0f0; 
display: inline-block; 
float: right; 
width: 250px; 
} 

#centercol { 
border: 1px solid #000; 
overflow: hidden; 
} 

#header { 
border: 1px solid pink; 
width: 100%; 
} 

#footer { 
border: 1px solid pink; 
width: 100%; 
} 

Answer 1

c'è niente di sbagliato con i CSS float. È possibile utilizzare la proprietà min-width nel wrapper per impostare una larghezza minima.

Ecco un esempio:

HTML:

<div class="wrap"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    <div class="center">Center</div> 
</div> 

CSS:

.wrap { 
    width: 100%; 
    min-width: 940px; 
} 

.left { 
    float: left; 
    width: 200px; 
} 

.center { margin: 0 205px; } 

.right { 
    float: right; 
    width: 200px; 
} 

JSBin Demo

Aggiornamento: Ed ecco la edited Fiddle

Answer 2

È possibile utilizzare

display:table; 

example