流体CSSレイアウトを見つけようとしています

Question

流体レイアウトのウェブサイトを作成しようとしていますが、いくつか問題があります。持っている

http://migo.no/random/css_layout.jpg

基本的に

私は、700pxの最小幅を持っており、それはできるだけ多くを伸ばす​​ために左の列をしたいし、右の列：私はこのような2列のページを作成したいです固定幅は400ピクセルです。ウィンドウサイズは1100px、その後も小さい場合にも、私はスクロールがでポップにしたい。

私はカントは、基本に設定

よろしく、 アレクサンダー

Answer 1

これを行う方法が1つあります。しかし、これは比例幅になります。サイドバーを常に400ピクセルにしてメインカラムのみを展開したい場合は、min-widthを使用するだけでサイドバーを作成できます。

<div class="container"> 
    <div class="main"></div> 
    <div class="sidebar"></div> 
</div> 

.container { 
    width:100%; 
    min-width:1100px; 
overflow:auto; 
} 

.main { 
    width:63.63636363%; 
    min-width:700px; 
float:left; 
} 

.sidebar { 
    width:36.36363636%; 
    min-width: 400px; 
float:left; 
} 

Answer 2

..私が望むようにそれを得るように見えますJSBin -------->HERE

基本的には、サイドコンテンツを右側に浮かべるだけです。#container divを囲むことで、2つの列が最小限の1100pxに維持されます。

Answer 3

は与えるあなたのbodymin-width: 1100px、あなたの#left-columnfloat: left、width: 100%とmargin-left: -400px、およびfloat: rightとwidth: 400pxあなた#right-column。残念ながら、内容がウィンドウの高さに収まらない場合は、onloadとonresizeのウィンドウイベントでjavascriptのサイズ変更機能が必要になります。実際の例を示したjsfiddleがあります：http://jsfiddle.net/dAgdx/

（注：列の高さのjavascriptの評価は別のブラウザでいくつかの調整が必要になることがありますが、その高さをリサイズウィンドウの高さよりも若干大きくしていることに気づくかもしれ

Answer 4

の作業例：http://labs.siku-siku.com/experiment/01

CSS：

#box { 
    min-width: 1100px; 
} 
#left, 
#right { 
    min-height: 500px; 
} 
#left { 
    margin-right: 400px; 
    min-width: 700px; 
    background-color: #0f0; 
} 
#right { 
    float: right; 
    width: 400px; 
    background-color: #f00; 
} 

HTML：

<div id="box"> 
    <div id="right">400px fixed width</div> 
    <div id="left">min-width of 700px</div> 
</div>