ネガティブマージン 右側を固定幅にしたリキッドレイアウト - bnote

floatを使った2段組で、右側が横幅固定で、左側が画面横幅の残りを可変でということをしたいとき、 どうしたら実現できるのでしょう。

例えば、左側を可変で右側を200pxとした場合、左側の width に100% - 200px と指定できれば問題ないのですが このような指定はできそうにありません。

これを解決する方法が ネガティブマージン になります。
[参考:Creating Liquid Layouts with Negative Margins]
可変にしたいほうの段のwidthを100%とし、marginをマイナスのピクセルを指定することによって リキッドレイアウト を実現することができます。 例えば、上記例のような場合、左側の段に width を 100% とし、margin-right を -200px と float:left を指定します。 左側の段の width は 100% なので、右側と重ならないよう、左側の子要素たちに margin-right を 200px と指定します。

サンプル

HTMLの例

<div id="container">
    <div id="content">
        <h1>ネガティブマージン 右側を固定幅にしたリキッドレイアウト</h1>
    </div>
</div>
<div id="sidebar">
    <ul>
    <li><a href="http://www.bnote.net/">bnote</a></li>
    <li><a href="../05_ref_html401.html">HTMLリファレンス</a></li>
    <li><a href="../13_ref_css21.shtml">cssリファレンス</a></li>
    </ul>
</div>

CSSの例

#container {
    float : left;
    width: 100%;
    margin-right : -200px;
    background-color : #ffffff;
}
#content {
    background: #f1f2ea;
    margin-right: 200px;
    border : 1px solid blue;
}

#sidebar {
    float : right;
    width: 200px;
}

リキッドレイアウト(リキッドデザイン)とは

リキッドレイアウトとは、ブラウザの表示サイズにあわせて相対的に横幅が変わるデザインで ブラウザのサイズやディスプレイのサイズが何であれそれなりに見えるデザインで製作することで ユーザビリティ向上方法のひとつとされています。