3カラムレイアウトで、両端を可変にする。(リキッドレイアウト)

カテゴリ:CSSテクニック 2006年12月29日 09:00

以前、中央を可変でのリキッドレイアウト について書きましたが、とある mixi のコミュ内で、両端を可変にするリキッドレウアウトについて書かれていたので、面白くて自分も作ってみました。(mixi コミュのがもっと高度でしたが)

3カラムレイアウトで、両端を可変にする。(リキッドレイアウト)デモ

▼解説は以下から。n

▼EntryMore▼

簡単に説明すると、左側の box、中央の box、右側の box をそれぞれ div で定義。
そして中央にだけ固定幅を設定し、両端の box には幅 50% を指定。
そして左側 box と、中央 box にfloat:leftを定義。右側 box にはfloat:rightを定義。

ただ、これだけではカラム落ちしてしまうので、ここでちょっと工夫をします。
まず、左側と右側の中に p 要素を配置します。
そして、左側 box の div にネガティブマージン(margin: -○px)を設定。
(※○は、固定幅にした中央 box の幅の半分の値)
さらに、左側 box 内の p 要素に上で設定したネガティブマージン分、今度は普通にマージンを取る。n

そうすることで、中央 box の中身が左側にかぶさってきます。
ただ、p に対してマージンを取らないと内容が重なってしまうため、p に対して通常のマージンを取ることでこれを回避します。

あとは、右側にこれとまったく逆の設定をするだけです。
まとめると、両端の幅を 50% に設定したあとで、中央 box 分の領域を無理矢理こじあけることで、両端がリキッドレイアウトになる、ということです。n

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/32