幅を固定しないでfloatをする « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb

幅を固定しないで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をとれば実現できます。