CSS で 2 段組 のレイアウトを作成する

以前、ホームページを左右等2つ以上のグループに分けるとき、テーブルの項目を使って レイアウトをすることが多くありました。この 段組 を CSS を使って行うことができます。

また、ここでは リキッドレイアウト (リキッドデザイン) もある程度意識してレイアウトしてみたいと思います。

CSS3では、Multi-column layout というものが定義されそうです。

CSSを使った段組の作成で多く見られるのは、次の2つの方法です。

  • floatを使った方法
  • positionを使った方法

デザインによってどちらを選択するか、また右側の設定をどのように設定するかは変わってきます。

floatの場合、右側に padding-left を設定し左の領域を確保します。 これによって右側の長方形を保つことができます。 例えば、左側より右側の方が長い場合、floatは左側の下へ回り込んでしまいます。

右側にも float を指定することで、この回り込みに対応する方法もあります。

positionの場合、左右とも左からの距離を指定する方法と左のみ指定し、 右側にpadding-leftを指定する方法が考えられます。

サンプル