Diseño de 3 columnas con columna fija izquierda y derecha. Columna derecha desemboca en la columna central en pantallas más pequeñas

Question

de configuración

HTML

<div id="fixed-wrapper"> 
<div id="header"> 
     <h1>Site Name</h1> 
</div> 
<div id="leftCol"></div> 
<div id="centerCol"></div> 
<div id="rightCol"></div> 

CSS:

#fixed-wrapper{ 
    min-width: 1264px; 
} 
#header{ 
    width: 100%; 
    height: 75px; 
    text-align: center; 
} 
#header h1 
{ 
    line-height: 75px; 
} 
#centerCol { 
    margin-left: 310px; 
    margin-right: 360px; 
    height: 100%; 
    min-width: 604px; 
} 
#rightCol { 
    width: 285px; 
    height: auto; 
    position: absolute; 
    top: 75px; 
    right: 0; 
    margin-right: 75px; 
} 
#leftCol { 
    width: 235px; 
    height: auto; 
    position: absolute; 
    top: 75px; 
    left: 0; 
    margin-left: 75px; 
} 

La cuestión es que la columna central tiene que tener un mínimo de ancho, pero la columna de la derecha shouldn' t mover a la columna central.

Answer 1

Trate de establecer el ancho de la columna central como auto en lugar a definir su anchura mínima,

#centerCol { 
    margin-left: 310px; 
    margin-right: 360px; 
    height: 100%; 
    width: auto; 
} 

Answer 2

Haga que la # envoltura fija esté colocada de forma relativa, de modo que la #leftCol y #rightCol se coloquen absolutamente con respecto a ella, en lugar de colocarla en el cuerpo del documento.

#fixed-wrapper{ 
    min-width: 1264px; 
    position: relative; 
} 

jsFiddle example