¿Cuál es la forma correcta de lograr el diseño de 3 columnas con centro de fluido

Question

Estoy trabajando en un diseño de 3 columnas con dos barras laterales de ancho fijo (izquierda y derecha) y un centro de fluido. He seguido el Holy Grail article de A List Apart, y, aunque esto funciona bien en la mayoría de los navegadores, tengo algunos problemas en Internet Explorer 7+.

El problema con IE 7+ en realidad no proviene de esta técnica, sino del hecho de que la página está renderizando en modo peculiar. Sin embargo, si lo hago render en modo de cumplimiento de normas, muchos elementos obsoletos se desplazan y requerirían una reescritura completa.

Dado que este artículo data de algunos años, ¿es esta la referencia más actualizada sobre el tema? ¿O debería estar aplicando una técnica diferente?

Cualquier observación sobre la mejor manera de hacer esto será muy apreciada.

Answer 1

Realmente no tiene sentido flotar las columnas.

HTML:

<div id="wrapper"> 
    <div id="left"></div> 
    <div id="center"> Center content</div> 
    <div id="right"></div> 
</div> 

CSS:

#left { 
    position:absolute; 
    left:0; 
    width:50px; 
    height:100%; 
    background-color:pink; 
} 

#center { 
    height:100%; 
    margin: 0 50px; 
    background-color:green; 
} 

#right { 
    position:absolute; 
    right:0; 
    top:0; 
    width:50px; 
    height:100%; 
    background-color:red; 
} 

body, html, #wrapper { 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
} 

Demostración: http://jsfiddle.net/AlienWebguy/ykAPM/

Answer 2

El posicionamiento absoluto trabaja para una página de ancho completo, pero ¿qué pasa cuando se tiene un ancho fijo que se centra . Se encontró con una solución basada en flex-box que funciona en IE8 +. El polyfill Flexie se utiliza para navegadores antiguos

Mira http://jsfiddle.net/lorantd/9GFwT/10/

<div id="header"></div> 
<div id="main">  
    <div id="menu"></div> 
    <div id="content"></div> 
    <div id="summary"></div> 
</div> 
<div id="footer"></div> 

#header { 
    background-color: #9B9EA7; 
    height: 70px; 
} 

body { 
    min-width: 500px; 
    max-width: 630px; 
    margin-right: auto; 
    margin-left: auto; 
    display: block; 
} 

#main { 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    display: flex;    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
    display:-webkit-box; /* Safari and Chrome */ 
    display:box; 
    width: 100%; 
} 

#menu { 
    background-color: #D42108; 
    width: 120px; 
    margin-top: 10px; 
    margin-right: 10px; 
} 

#content { 
    background-color: #FFD700; 
    height: 500px; 
    margin-top: 10px; 
    margin-right: 10px; 
    -webkit-box-flex: 2;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    -moz-box-flex: 2;   /* OLD - Firefox 19- */ 
    width: 60%;    /* For old syntax, otherwise collapses. */ 
    -webkit-flex: 2;   /* Chrome */ 
    -ms-flex: 2;    /* IE 10 */ 
    flex: 2; 
} 

#summary { 
    width: 30px; 
    margin-top: 10px; 
    background-color: #9B9EA7; 
} 

#footer { 
    background-color: #353535; 
    width: 100%; 
    height: 50px; 
    margin-top: 10px; 
    clear: both; 
} 

Answer 3

Creo que esto debería ser útil en la mayoría de los casos.

Consulte el enlace a continuación.

http://jsfiddle.net/ykAPM/278/

#left { 
position:fixed; 
left:0; 
width:50px; 
height:100%; 
background-color:pink; 
} 

#center { 
margin: 0 50px; 
background-color:green; 
overflow:auto 
} 

#right { 
position:fixed; 
right:0; 
top:0; 
width:50px; 
height:100%; 
background-color:red; 
} 

body, html, #wrapper { 
width:100%; 
height:100%; 
padding:0; 
margin:0; 
} 

#test{ 
height:1000px; 
}