流体センターを使用して3列レイアウトを実現するための適切な方法

Question

2つの固定幅のサイドバー（左右）と流体の中心を持つ3列のレイアウトに取り組んでいます。私はA List ApartのHoly Grail articleに従っていますが、これはほとんどのブラウザでうまく機能しますが、Internet Explorer 7以降でいくつかの問題が発生しています。

IE 7+の問題は実際にはこの手法に起因するものではなく、むしろページがクォークモードでレンダリングされていることに由来します。しかし、標準準拠モードでレンダリングすると、時代遅れの要素の多くが置き去りにされ、完全な書き直しが必要になります。

この記事は数年前のことですが、これは最新の参考資料ですか？あるいは、別のテクニックを適用する必要がありますか？

これを行う最も良い方法についての洞察は非常に高く評価されます。

Answer 1

実際に列を浮かべることはありません。

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

デモ：http://jsfiddle.net/AlienWebguy/ykAPM/

Answer 2

絶対位置は、全幅ページの動作しますが、あなたが中心に一定の幅を持っている場合はどうでしょう。 IE8 +で動作するフレックスボックスをベースにしたソリューションを用意しました。 flexieのポリフィルは、私は、これはほとんどの場合に有用であると考えてい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

を参照してください。古いブラウザ

のために使用されています。

下記のリンクをご覧ください。

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