Webサイト制作をご検討中の方へ。ScuderiaWebが低価格・短納期・高品質なWebサイトを制作いたします。

ローカルメニュー

(X)HTML+CSS Tips

IE5.5 IE6 IE7 FireFox2 Opera9.6 Chrome0.3

幅を固定しないでfloatをする

floatでdivを2つ横並びしたときに、片方しか幅を指定せず、もう片方の幅はautoにする方法です。
通常、floatで横並びを実現する際は、両方のdivの幅指定が必要ですが、例えばブログのサイドバーのみ幅を指定して、記事部分はブラウザの解像度によって幅を変更したいといったときなどに活用できます。

サンプル

片側のみ200pxに固定し、もう片方の幅は指定していないサンプルです。

幅を固定しないでfloatをするサンプル(別ウィンドウで表示)

コード

(X)HTML

<div id="side">
サイド
</div>

<div id="contents">
コンテンツ
</div>

CSS

div#side {
	float: left;
	width: 200px;
	background: #999;
}

div#contents {
	margin-left: 200px;
	background: #ccc;
}

幅を固定したブロックにのみ、floatを設定し、もう片方にはfloatは指定せず、floatを設定したブロックの幅の分だけmarginをとれば実現できます。