当店のページはほぼ全て2カラムで作成しています。
でも最近ソースを書いていて、
「3カラム・・・いいなぁ・・・。」と思ってきました。
あ。
もちろん、全ページ3カラムにしたいとかでは無いですよ^^
1カラム・2カラム・3カラムとそれぞれ長短ありますしね。
だからまず手始めにTOPページを3カラムにしてみようかなぁ?なんて、
漠然と考えています。
その際、divで括って入れ子にしてあげれば
比較的簡単に3カラムには出来ちゃうんですが、
あまりいっぱい入れ子にしたくないなぁと考えちゃいます(←暇人ですw)
そうなると、避けて通れない(?)のが、
【ネガティブマージン(negative margin)】だと思います。
ネガティブマージンを使えば、変に入れ子にせずに表示できると思います。
で。
以下のように自分で書いてみました。
ちゃんと私は理解できているのか少々不安です(汗)
(主要部分のみ抜粋)
----------------------------------
html:
<div id="allContents">
<div class="contents"></div>
<div class="sub"></div>
<div class="menu"></div>
</div>
css:
#allContents {
width : 800px;
margin : auto;
text-align : left;
}
.contents {
width : 500px;
margin-left : -650px;
float : right;
}
.sub {
width : 150px;
float : right;
}
.menu{
width : 150px;
float : left;
}
----------------------------------
こうすると、至ってシンプル☆
良くないコレ、コレ良くない?^^;
ただ、上記でも書きましたが他のブラウザで確認していないので
もしかしたら最悪レイアウト崩れも起こるかもしれません(大汗)
今、当店のIE7・IE8では大丈夫でした♪
(誰か確認してくれると嬉しいですが、そんな人いませんよね^^;)
あ。ちなみにIE6でwidthの解釈の違いによるバグがあるらしいので、
floatした要素にはpadding, borderを使わないようにした方が良いかもしれません。
ガチガチに幅を決めている人は、たぶんレイアウトが崩れます。
P.S.この記事にコメントが入ることを願いますw