CSS 段組みのいろいろ

今回はCSSを使用した段組みについてです。

サンプルでは二つのボックスを用意し、それを横にならべています。
段組みはfloatとpositionにより実現しました。

それでは下記がサンプルコードです。
まずfloatによる方法です。

<html>
<head>
    <title>sample6</title>
    <style>
    #boxA { width:200px;height:100px;float:left;background-color: #99cc00; }
    #boxB { width:200px;height:100px;float:left;background-color: #FF0000; }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="boxA">
            aaaaaaaaaa
        </div>
        <div id="boxB">
            bbbbbbbbb
        </div>
    </div>
</body>
</html>

【上記コードのデモはこちら】

つづいて、positionによる方法です。
前者よりも記述が増えますし、位置を指定しなければならないため少々面倒です。

<html>
<head>
    <title>sample7</title>
    <style>
    #boxA { 
    width:200px;
    height:100px;
    background-color: #99cc00;
    position:absolute;
    }
    #boxB {
    width:200px;
    height:100px;
    background-color: #FF0000;
    position:absolute;
    left:208px;
    }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="boxA">
            aaaaaaaaaa
        </div>
        <div id="boxB">
            bbbbbbbbb
        </div>
    </div>
</body>
</html>

【上記コードのデモはこちら】