流体幅ウェブサイトのデザイン

Question

ウェブサイトに3つのセクションが必要です。 私の左のセクションは150px、私の右のセクションは250px、残りのスペースはすべて中央のものにしたい。私はそれがCSSだけを使用して起こるように思わない。ここでは私も動作するはずのコードは次のとおりです。

<div> 
    <div class="left" style="float: left; width: 150px; background: red"> 
    </div> 
    <div class="center" style="background: blue;"> 
    </div> 
    <div class="right" style="background: green; width: 250px; float: right"> 
    </div> 
</div> 

私は真ん中の1がすべてのスペースを引き継ぐように、右部分が押し下げられていることを取得しています。

私は間違っていますか？

Answer 1

<div style="overflow:hidden"> 
    <div class="left" style="float: left; width: 150px; background: red"> 
    </div> 
    <div class="right" style="background: green; width: 250px; float: right"> 
    </div> 
    <div class="center" style="background: blue; margin-left:150px; margin-right:250px"> 
    </div> 
</div> 

役に立てば幸い：本当に流体設計では、理想的には似ています。

Answer 2

この

<div> 
    <div class="left" style="float: left; position: relative; width: 150px; background: red"> 
    </div> 
    <div class="center" style="float: left; position: relative; background: blue;"> 
    </div> 
    <div class="right" style="float: left; position: relative; background: green; width: 250px;"> 
    </div> 
</div> 

、より良いを試してみて、あなたがさえずりのようなCSSのブートストラップを使用して起動する必要がありますhttp://twitter.github.com/bootstrap/

それは列の管理を担当し、それがまた、本当に簡単

Answer 3

<div> 
    <div class="left" style="float: left; width: 150px; background: red"> 
    </div> 
    <div class="left center" style="background: blue; float: left; width: 500px"> 
    </div> 
    <div class="right" style="background: green; width: 250px; float: right"> 
    </div> 
</div> 

センターなければならないのですフロートを持っています。あなたは絶対位置を使用しない限り、浮動小数点なしでそれを持つことはできません。上の更新されたコードを見てください。

<div style="width:100%> 
    <div class="left" style="float: left; width: 20%; background: red"> 
    </div> 
    <div class="left center" style="background: blue; float: left; width: 55%"> 
    </div> 
    <div class="right" style="background: green; width: 25%; float: right"> 
    </div> 
</div> 

Answer 4

これはまさにあなたが探しているものです。あなたはあなたの希望するサイズに値を調整する必要があります。

HTML私はそれを試してみましたが、中央のdivは、すべての余分なスペースを取らないJukienバルモン@

<div id="container"> 
    <div id="center" class="column"></div> 
    <div id="left" class="column"></div> 
    <div id="right" class="column"></div> 
</div> 

CSS

body { 
    min-width: 630px;  
} 
#container { 
    padding-left: 200px; 
    padding-right: 190px; 
} 
#container .column { 
    position: relative; 
    float: left; 
} 
#center { 
    padding: 10px 20px;  
    width: 100%; 
} 
#left { 
    width: 180px;   
    padding: 0 10px;  
    right: 240px;   
    margin-left: -100%; 
} 
#right { 
    width: 130px;   
    padding: 0 10px;  
    margin-right: -190px; 
} 


* html #left { 
    left: 150px;   
}