左側に幅固定のメニューを置いて、右側のコンテンツをリキッドデザインにしたかったので、やり方を調べてみました。
初めてそういったレイアウトをしたのですが、まず単純に考えて
■左側の幅200px
■右側の幅100％
って感じに書けばいいと思ったのですが、これだとまったくうまくいかない。
つまり、右側の幅は「全体の幅（100％）-200px」にならないといけないんですが、こういった書き方がCSSでは出来ません。ではどうするか。
#left{
float:left;
width:200px;
}
#right{
float:right;
width:100%;
margin-left:-200px;
}
#right #inner{
margin-left:200px;
}こんな面倒な書き方をしてあげるとうまくいきました。
右側のｄｉｖを入れ子にして、一回ネガティブマージンで-200pxしてあげて、さらにその中のdivでマージンを200pxとってあげると、意図したようなデザインになりました。IE6、IE7、FF、Operaでは動作確認しましたが、なんか気持ち悪い書き方だなぁ・・・。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
