固定+リキッドレイアウト

片方を固定レイアウト、もう片方をリキッドレイアウトとして組むには、以下の方法があります。

対応方法

• float + margin + ネガティブmarginを使用するパターン
• float + marginを使用するパターン
• flexを使用するパターン

float + margin + ネガティブmarginを使用するパターン

• ※ 最小幅（min-width）を指定し、ウィンドウが最小幅以下になると折り返す。

【HTML】

<div class="sample"> <div class="main"> <div class="main-inner"> <p>main right</p> <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p> </div> </div> <div class="side"> <p>aside</p> <p>left</p> </div> </div>

【CSS】

div.sample { background-color:#eee; overflow:hidden; /* clearfixの代わり */ } div.sample div.main { margin-left:-220px; /* .div.sideの横幅 + 余白 */ float:right; width:100%; min-width:500px; background-color:#ddd; } div.sample div.main div.main-inner { margin-left:220px; /* .div.sideの横幅 + 余白 */ background-color:#ccc; } div.sample div.side { float:left; width:200px; background-color:#bbb; }

float + marginを使用するパターン

• ※ 可変要素は固定要素の次の位置である必要がある。

【HTML】

<div class="sample"> <div class="side"> <p>aside</p> <p>left</p> </div> <div class="main"> <p>main right</p> <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p> </div> </div>

【CSS】

div.sample { overflow:hidden; /* clearfixの代わり */ min-width:500px; } div.sample div.main { margin-left:220px; /* .div.sideの横幅 + 余白 */ background-color:#ddd; } div.sample div.side { float:left; width:200px; background-color:#bbb; }

flexを使用するパターン

• ※ フレキシブルレイアウトの対応ブラウザは以下のページを参照ください。
  フレキシブル・レイアウトの基本

【HTML】

<div class="sample"> <div class="side"> <p>aside</p> <p>left</p> </div> <div class="main"> <p>main right</p> <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p> </div> </div>

【CSS】

div.sample { display:-webkit-box; display:-moz-box; display:-ms-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; } div.sample div.main { -webkit-box-flex:1; -moz-box-flex:1; -webkit-flex-grow:1; -moz-flex-grow:1; flex-grow:1; background-color:#ddd; } div.sample div.side { width:200px; background-color:#bbb; }