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>
    </div>
    <div id="footer"></div>
</body>

ヘッダーとフッターの間にarea1というコンテナクラスを作り、２分割しました。Area1-1はさらに２分割しています。

CSSソース

サンプルソース

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