4段組レイアウトの方法

4段組レイアウトの例です。

HTMLソース

サンプルソース

<body>
    <div id="header"></div>
    <div id="area1">
        <div id="area1-1">
            <div id="area1-1-1"></div>
            <div id="area1-1-2"></div>
        </div>
        <div id="area1-2">
            <div id="area1-2-1"></div>
            <div id="area1-2-2"></div>
        </div>
    </div>
    <div id="footer"></div>
</body>

ヘッダーとフッターの間にarea1というコンテナクラスを作り、2分割しました。4段組レイアウトにするためさらに2分割しています。

CSSソース

サンプルソース

div#header { width : 800px; }
div#area1 { width : 800px; }
div#area1-1 {
    float : left;
    width : 394px;
}
div#area1-1-1 {
    float : left;
    width : 191px;
}
div#area1-1-2 {
    float : right;
    width : 191px;
}
div#area1-2 {
    float : right;
    width : 394px;
}
div#area1-2-1 {
    float : left;
    width : 191px;
}
div#area1-2-2 {
    float : right;
    width : 191px;
}
div#area1:after{
    display : block;
    clear : both;
    height : 0;
    visibility : hidden;
    content : ".";
}
div#footer { width : 800px; }

広告

関連コンテンツ