Jaki jest właściwy sposób uzyskania układu 3-kolumnowego z centrum płynów

Question

Pracuję nad układem 3-kolumnowym z dwoma pasami bocznymi o stałej szerokości (lewym i prawym) i centrum płynów. Śledziłem A List Apart's Holy Grail article i chociaż działa to dobrze w większości przeglądarek, mam pewne problemy w Internet Explorerze 7+.

Problem z IE 7+ w rzeczywistości nie wynika z tej techniki, ale z faktu, że strona renderuje się w trybie dziwactwa. Jeśli jednak sprawię, że będzie renderowany w trybie zgodności ze standardami, wiele przestarzałych elementów zostanie przesiedlonych i będzie wymagało kompletnego przepisania.

Biorąc pod uwagę, że ten artykuł ma kilka lat, czy jest to najbardziej aktualne odniesienie na ten temat? Czy powinienem zastosować inną technikę?

Wszelkie spostrzeżenia na temat najlepszego sposobu, aby to zrobić będą bardzo mile widziane.

Answer 1

Naprawdę nie ma sensu przestawiać kolumn.

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; 
} 

Demo: http://jsfiddle.net/AlienWebguy/ykAPM/

Answer 2

Absolutne pozycjonowanie działa na pełną szerokość strony, ale co, gdy masz stałą szerokość, która jest wyśrodkowany . Rozpoczęło się od rozwiązania opartego na flex-box, który działa w IE8 +. Flexie polyfill jest używany dla starszych przeglądarek

Zobacz 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

Wierzę, że to powinno być przydatne w większości przypadków.

Zobacz link poniżej.

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; 
}