ネガティブマージンによるレイアウト

「マイナスマージン」や「ネガティブマージン」で組み立てるレイアウトです。

てんぽさんの記事にあるように、floatにより発生するカラム落ちは、親のボックスが内包するこのボックスのwidthに原因があるのではなく、そのマージン辺に原因があります。
とりあえず、以下をご覧ください。

たとえば固定幅の2カラムの段組を作るときは、

<div id="content">

    <div id="main">
        <p>メイン的なやつ</p>
    </div>

    <div id="utilities">
        <p>サブ的なやつ</p>
    </div>

</div>

こんな感じの構造になります。
これに当てこむスタイルは

div#content {
    width: 700px;
    margin: 0 auto;
}

div#content div#main {
    float: left;
    width: 100%;
}

div#content div#utilities {
    float: left;
    width: 200px;
}

こんな感じになります。
これにより、700pxで固定され中央に配置された親ボックスの中に、子ボックスが2カラムで配置されます。…がしかし、このままでは以下のようになってしまいます。

• div#contentのマージン辺
• div#mainのマージン辺
• div#utilitiesのマージン辺

普通だとここで「div#mainのwidth」を疑うでしょう。しかし、widthは原因ではないのです。上記でも述べたとおり、原因は子ボックスのマージン辺にあるのです。
floatレイアウトでカラム落ちしない条件は以下のとおりとなります。

• 2番目の子ボックスの左マージン辺が、1番目の子ボックスよりの右マージン辺より右側になければならない
• 2番目の子ボックスの右マージン辺が、親ボックスの右マージン辺より右側にあってはならない

先ほどの場合、div#mainの右マージン辺がdiv#contentの右マージン辺に隣接し、div#utilitiesの右マージン辺がdiv#contentの右マージン辺より右側に位置してしまうのが原因でした。
そこで、div#mainの右マージン辺を

div#content div#main {
    float: left;
    width: 100%;
    margin-right: -200px; /* 新しく追加された行 */
}

このようにします。
すると、div#mainのwidthが100%(親ボックスのwidthと同じ幅)であっても、右マージン辺は-200pxされ、div#utilitiesの右マージン辺がdiv#contentの右マージン辺より右側に位置せずに2カラムとなるわけです。

z軸を加えた構造は以下のようになります。

ただし、このままだとdiv#utilitiesにより、div#mainの右200pxは隠れてしまいます。なので、さらに中の子要素にマージンを指定してあげる必要があります。

div#content div#main p {
    margin-right: 200px;
}

• div#main pのマージン

この方法を理解していれば、「サイドバー固定幅・メイン可変幅のリキッドレイアウト」や「3カラムのリキッドレイアウト」などもカラム落ちすることなく、さくっとできてしまいます。

このフロートとマージン辺の概念を押さえておけば、思わぬところでつまづいたりしなくなると思います。