「みんな大好きリキッドレイアウト 〜固定幅 + リキッドレイアウトの実装〜」 デモ

※ .wrapperStyle, .mainStyle, .subStyleはサンプルを見やすくするための色付けや余白を指定するためのclassです。
リキッドレイアウトに必要な指定とは関係有りません。

完成形

div#wrapper(80%)

div#main(100%)
div#sub(200px)

0.普通のリキッドレイアウト

div#wrapper(80%)

div#main(80%)
div#sub(20%)

1.subを固定幅にする

subとmainがピッタリくっつかなくなる。

div#wrapper(80%)

div#main(80%)
div#sub(200px)

2.mainを100%にする

mainが最大まで広がる。subはカラム落ち状態。

div#wrapper(80%)

div#main(100%)
div#sub(200px)

3.マイナスマージンでsubの空間を作る

margin-right: -200px;によってmainが200px分、引き込まれる。

div#wrapper(80%)

div#main(100%)
div#sub(200px)

4.mainに余白を与える

といってもmain自体にマージンを与えても、subのマイナスマージンで作り出した空間を相殺してしまうだけ。さっきの状態に戻ってしまった。

div#wrapper(80%)

div#main(100%)
div#sub(200px)

5.mainの内側の要素にマージンを与える

mainContentにmargin-left: 200px;を与えればsubの横にピッタリ!

div#wrapper(80%)

div#main(100%)
div#sub(200px)