横に3つ並べるコツ

中央にメインコンテンツをもってきて、左右にナビゲーション等を置きたいとする。

まずはこんなかんじに書いてみる:

<div id="left">左</div>
<div id="right">右</div>
<div id="center">中央</div>

ちなみに左と右は順不同。

あとは以下のようにスタイルシートを書く。

左のスタイル:

#left {
  float: left;
  width: 100px;
}

右のスタイル:

#right {
  float: right;
  width: 100px;
}

中央のスタイル:

#center {
  margin-left: 100px;
  margin-right: 100px;
}

Tipsというかあたりまえなんだが、idにはleftとかじゃなくて、navigationとかmenuとか意味のある名前にすると後で調整するとき(例えば表示を逆にするとき)に惑わなくて済む。

中央のものが一番最後な理由は、左右のボックスは浮かせてしまうので、そのまま真中のボックスが一番上に繰上がるため。もしid:centerのmargin-leftとmargin-rightをはずすと横いっぱいに広がり、id:rightとid:leftのコンテンツにかぶさってしまうのがわかる 。

ちなみに、さらにfloatする要素を増やす場合、例えば右にもう一つほしい場合は、:

<div id="left">左</div>
<div id="right">右</div>
<div id="right2">右その2</div>
<div id="center">中央</div>

こんな感じにして、id:rightと同じようにfloat:rightをいれる。 忘れてはいけないのは、id:centerのmargin-rightをright2の分だけ増やすこと。 これは左に追加する場合であっても同様。