シンプルなレイアウトのCSS

Question

私は数時間のレイアウトをしようとするが、私はまだ問題がある。私はmakeしたい：http://img191.imageshack.us/img191/1243/schemal.png

私は体が柔軟だったと思います。最大幅ページ900px。私はフロートに対処することはできませんとクリア。

ライブ例：助けをhttp://jsfiddle.net/eTEz2/

ありがとう！

Answer 1

HTMLを少し並べ替えた後（サイドバーのすべてのアイテムをoneleft、oneright、twoleftなどに整列させて移動した後）、ボディに浮動小数点を含めることを前提にその効果を再現しました商品は、with this jsfiddleの下に流出します。

それはあなたが望んでいた効果はない場合、私はあなたが以下のような3つの列、持っているあなたのHTMLを並べ替えることをお勧め：

<div class="column-left"></div> 
<div class="column"></div> 
<div class="column-right"></div> 

をそして、これらのdivの中に、あなたが好きな要素を持つことができ、あなたが希望ここで左右の列を浮動させるだけでよい。あなたはまた、CSSのプロパティの高さを使用することができます

Answer 2

ヘッダー、フッター、2面、および1つの内容を別々のパーティションに分割してください。側面は3つの要素で構成されています（おそらくあなたの場合はdivです）。

Answer 3

<div ></div> //top bar 

<div id="left column" style="width:100px;float:left;"> 
    <div style="float:left; width:100px;">//left boxes 
    <div style="float:left; width:100px;"> 
    <div style="float:left; width:100px;"> 
    <div style="float:left; width:100px;"> 
</div> 

<div id="center column" style="float:left; width:500px;"> 
    <div style="float:left; width:490px;"> //center box 
</div> 

<div id="rightcolumn" style="float:left; width:100px;"> 
    <div style="float:left; width:100px;">//right boxes 
    <div style="float:left; width:100px;"> 
    <div style="float:left; width:100px;"> 
    <div style="float:left; width:100px;"> 
</div> 

：190pxを。様々な高さを設定する。これがあなたを助けることを願ってください。