clearfix を用いた3カラム・レイアウトのコーディングの手順

  1. 3つのボックスに対して、それぞれ、float プロパティを指定する。
  2. clearfix を使い、回り込みを解除する。

HTMLのコーディング

div#contents の中に、div#left-side,div#main,div#right-side を記述する。

 

CSS のコーディング

div#contents の幅は、946px、div#left-side の幅を 240px 、div#main を480px 、div#right-side の横幅を 196px とする。

それぞれの要素がわかりやすいように、背景色を指定する。

3カラム・レイアウトのコーディング

 

3カラム・レイアウトのコーディング

オレンジのフッターが入り込み、レイアウトが崩れている。

clearfix を使い、回り込みを解除する。

全体のcontentsを div#contents で囲んでいるので、div#right-side の後に、div#contents の閉じタグが来て、clear プロパティを指定する要素が存在しない。

なので、clearfix を利用する。

div#contents に、clearfix というクラスをHTMLに記述し、CSSに以下のように記述する。

3カラム・レイアウトのコーディング

 

要素間の間隔は、margin などで取る。

【参考書籍】

---here---

コメントを残す