Dreamweaverの使い方 » Blog Archive ４段組レイアウトの方法

４段組レイアウトの方法

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

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というコンテナクラスを作り、２分割しました。４段組レイアウトにするためさらに２分割しています。

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; }