3列レイアウト自動中段幅

Question

ラッパー幅、固定幅（ピクセル）、左右幅、中間幅の3列レイアウトのWebページを作成しようとしていますが、カラム。ここで、ソースである：

HTML

<aside class="left"> 
    <span>Categories</span> 


</aside> 

<section> 
    <span>Main</span> 

</section> 

<aside class="right"> 
    <span>Test</span> 

</aside> 

CSS

* { 
    margin: 0px; 
    padding: 0px; 

} 

html, body { 
    height: 100%; 
    width: 100%; 

} 

.container { 

    height: 100%; 
    width: 100%; 

} 

.container > aside.left { 
    float: left; 
    width: 197px; 
    border-right: black dashed 3px; 

} 

.container > section { 
    float: left; 
    width: auto; 


} 

.container > aside.right { 
    float: left; 
    background-color: #005f98; 
    width: 200px; 

} 

Answer 1

をあなたは柔軟なボックスモデルを見ましたか？ http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Answer 2

、パーセンテージによる幅を設定してみてくださいので、例えば：

.container > aside.left { 
float: left; 
width: 31%; 
border-right: black dashed 3px; 

} 

.container > section { 
float: left; 
width: 31%; 


} 

.container > aside.right { 
float: left; 
background-color: #005f98; 
width: 31%; 

} 

厥方法私は克服した前にこの問題。

Answer 3

あなたは左と右の列のwidthとfloatを指定した場合は、中央の列は自動的にギャップを埋めます：

http://jsfiddle.net/xHnDX/4/

あなたが見ることができるように、コンテンツのdiv要素は、実際にサイドdivをオーバーラップし、コンテンツはそれらの間に留まりますが。あなたが好きなら、あなたはここに示すように、コンテンツのdivの幅を補うために余分なコンテナを追加することができます。

http://jsfiddle.net/YauQc/

Answer 4

あなたは絶対位置のサイドバーで、あなたの山車を置き換えることができます：

<aside class="left"> 
    <span>C</span> 
</aside> 

<section> 
    <span>M</span> 
</section> 

<aside class="right"> 
    <span>T</span> 
</aside> 

をとライブ

.left { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 50px; 
    display: block; 
    background: #ffe; 
    height: 100%; 
} 
.right { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 50px; 
    display: block; 
    background: #fef; 
    height: 100%; 

} 
section { 
    display: block; 
    margin: 0 50px; /* Margin sized to match the sidebars */ 
    background: #fee; 
} 

：http://jsfiddle.net/ambiguous/puPbu/

色とサイズは、すべてがどこにあるかを明確にするためのものです。ラッパーを入れようとしているのであれば、適切な位置にサイドバーを配置するにはposition: relativeが必要です。

Answer 5

あなたはIE7、this will workをサポートする必要がない場合：CSS3で

* { 
    margin: 0px; 
    padding: 0px;  
} 
html, body { 
    height: 100%; 
    width: 100%;  
} 

.container { 
    display: table;  
    height: 100%; 
    width: 100%; 
    min-width: 600px; 

} 
.container > aside, .container > section { 
    display: table-cell; 
    width: auto; 
} 
.container > aside.left { 
    width: 197px; 
    border-right: black dashed 3px; 
} 

.container > aside.right { 
    background-color: #005f98; 
    width: 200px; 
} 

Answer 6

あなたは

#multicolumn{ 
    column-count: 3 
} 

http://jsfiddle.net/ilumin/w7F7c/

参照の上、それを確認し使用することができます：http://www.quirksmode.org/css/multicolumn.html