2006年05月14日（日） コメント:4 トラックバック:0
- 三段組で遊ぼ
-
次の条件を満たす段組をCSSでレイアウトしやがれ。今作れ、すぐ作れ、直ちに作れ。
- 3カラムのリキッドデザインであること。
- 両端のカラムは固定幅とし、中央のカラムのみ可変幅にすること。
- HTMLソースでは中央のカラムを他のカラムより先に記述すること。
- position: absoluteは使用禁止。floatでデザインすること。
では作ってみようか、と思ったけどCSSによる段組（マルチカラム）レイアウト講座のメインカラム幅可変、サイドバー幅固定 3カラムに解説があるので、そちらを参照のこと。
「三段組でメインコンテンツを先に書いてみるテスト（rtmr）」ではレイアウト講座とは違ったやり方で実現しています。
.main-w { float: left; width: 100%; margin-right: -100%; }
margin-right: -100%;というのが大胆で素敵。HTMLの構造もいい感じです（わけのわからんwrapperは必要ない）。
このやり方は是非パクり参考にしたいですね。
- 参考：3カラムのHTML
- 参考：フロートとマージン辺
![[RSS]](http://blog-imgs-18-origin.fc2.com/m/b/m/mb/feed-icon-14x14.png){kind=icon}
コメント（4件）
はじめまして。いつも参考にさせてもらっています。
この方法、はじめは「おっ」と思ったのですが、やはりWinIEが足をひっぱりますね。
あとpre要素が使えないのが残念。
テキストがメインのサイト限定といったところでしょうか。
div2重がけを避けるならWinIEではきつそうです。サイドバーと重ならないようにメインカラム直下のブロック要素に左右マージンを与えるわけですが、それだとwidthが使えないのですね。WinIEはコンテナブロックのwidthがautoだと、table要素やフロートに不具合があるため大変です。
それに「テキストがメインのサイト」なら3段組にはしないでしょうね。
ちなみにdivをいくらか増やせば、（overflow:autoをつかって）pre要素も使えそうです。実際、いまのテンプレと同程度のdiv数ならうまくいきました（WinIEでも大丈夫なはず）。
中央記事部分に min-widthつける方法をお教えください＾＾；
中央記事部分は可変幅ですが両サイドは固定幅なので、中央部の最小幅を決めることは全体の最小幅を決めるのと同じことです。
ですから、3つのdivのコンテナブロック、あるいはbody要素にmin-widthを指定すればよいでしょう。