ピクセルとパーセンテージ幅divs side-by-side

Question

私は多くの類似の質問を見つけ、いくつかのソリューション（いわゆる「聖杯」CSSレイアウトを含む）を試しましたが、私が必要とすることをしなさい。

idがrightのcontaining div（CSSを含むブロック）があります。それの左側には、固定幅のdiv（スプリッターバーですが、それが何を使用しているかは関係ありません; id splitpane）;右側のスペースに残りのdiv（別名div right-box）を埋めます。 3px - 私は左に1 width: 3pxに設定し、2つの内部のdiv display: inline-block（vertical-align: topで）作ってみましたが、その後、幅が100％を持っている権利を設定する方法はありませんしました

。私もfloat: left/margin-left: -100%/margin-left: 3pxのトリックで試してみましたが、同じ問題があります：100％+ 3pxが親を含むブロックをオーバーフローさせ、スクロールバーをポップアップさせます。 （もちろん、スクロールバー自体は問題ではなく、overflow: hiddenを使用して削除できますが、右側のコンテンツは切り捨てられます）

現在、私は右のdivにはwidth: 99.5%を使用していますが、これはひどいハックです（画面の幅に応じてオーバーフローする可能性があります）。それは見えます。このようなビット：

#right { 
    display: inline-block; 
    vertical-align: top; 
    height: 100%; 
    width: 85%; /* this is part of a larger div */ 
} 
#right-box { 
    width: 99.5%; /* stupid hack; actually want 100% - 3px for splitter */ 
    height: 100%; 
} 
#splitpane { 
    float: left; 
    width: 3px; 
    height: 100%; 
    background: white; 
    border-left: solid gray 1px; 
    border-right: solid gray 1px; 
    cursor: e-resize; 
} 

はこれを行うことも可能です：（floatバージョンが、インラインブロックのバージョンが似ている）を、次のようにCSSで

<div id="right"><div id="splitpane"></div><div id="right-box"> 
    ... 
</div></div> 

？これは社内向けのものなので、ソリューションはFirefox 3でのみ動作する必要があります（ただし、FF3に固有の場合は、ソリューションが標準に準拠しているが、他のブラウザはそうではなく、Firefox専用ですコード）。

Answer 1

これも可能です。ブロックレベルの要素は自動的に残りの水平方向の空間を占めるように拡張されるため、自由に浮かせた要素の横にあるブロックレベルの要素を希望の幅で利用することができます。

<style type="text/css"> 
    div { 
     height: 100px; 
    } 
    #container { 
     width: 100%; 
    } 
    #left { 
     background: #FF0; 
    } 
    #splitpane { 
     position: relative; 
     float: right; 
     background: #000; 
     width: 3px; 
    } 
</style> 

<div id="container"> 
    <div id="splitpane"></div> 
    <div id="left"></div> 
</div> 

http://jsfiddle.net/georeith/W4YMD/1/

Answer 2

div＃right-boxに浮動していないコンテンツしか含まれていない場合は、代わりに#rightの中にコンテンツを置き、浮動した#splitpaneを囲むようにしてください。

Answer 3

なぜ右のボックスに余白 - 左（フロートレイアウトなので）を使用しなかったのですか？

ので、スプリッタのdivを作成する必要はありません...そんな

#right{ 
width:200px; /*specify some width*/ 
} 
#rightbox{ 
float:left; 
margin-left: 3px; /*replace the splitter*/ 
/*margin: 0 3px; /*use this to give left & right splitter*/ */ 
} 

ええ、何かが、私は空のdivを嫌い、それはセマンティックではないですし、それが道

「古い」テーブルの上にスプリッタを置くようなものです

Answer 4

DIVは相互に「話し合っていない」ため、これに対して間違った要素タイプです。

<table style="width:200px"> 
<tr> 
    <td id="splitpane" style="width: 3px">...</td> 
    <td id="rightBox" style="width: 100%">...</td> 
<tr> 
</table> 

100％は、可能な限り広いが、テーブルの範囲内でrightBoxを作成します。