営業の枠から飛び出せ!
営業の枠から飛び出せ!
2008.04.17

幅固定+リキッドレイアウトにする方法

ゴウ

左側に幅固定のメニューを置いて、右側のコンテンツをリキッドデザインにしたかったので、やり方を調べてみました。

初めてそういったレイアウトをしたのですが、まず単純に考えて

■左側の幅200px
■右側の幅100%

って感じに書けばいいと思ったのですが、これだとまったくうまくいかない。

つまり、右側の幅は「全体の幅(100%)-200px」にならないといけないんですが、こういった書き方がCSSでは出来ません。ではどうするか。

#left{
	float:left;
	width:200px;
}
#right{
	float:right;
	width:100%;
	margin-left:-200px;
}
#right #inner{
	margin-left:200px;
}

こんな面倒な書き方をしてあげるとうまくいきました。

右側のdivを入れ子にして、一回ネガティブマージンで-200pxしてあげて、さらにその中のdivでマージンを200pxとってあげると、意図したようなデザインになりました。IE6、IE7、FF、Operaでは動作確認しましたが、なんか気持ち悪い書き方だなぁ・・・。