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

2 段組 レイアウトの例

左側の内容をdivで囲み右マージンを右側の段の分だけ確保します。

HTMLの例

<div id="container">
    <div id="content">
        <h1>2 段組 レイアウトの例</h1>
    </div>
</div>
<div id="sidebar">
    <ul>
    <li><a href="https://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;
}