【CSS】floatを使って要素を横並びにしたい

横並びにする方法はいくつかありますが、floatを使って回り込ませることで
リストやブロックを横並びにすることができます。

float	要素を浮動化させ、右か左に寄せるプロパティです。

floatを使って要素を横並びにさせる

CSS

#contents {
	width: 400px;
}
/* 横並びにしたいブロック１ */
#main {
	width: 300px;
	float: left;
}
/* 横並びにしたいブロック２ */
#side {
	width: 98px;
	float: left;
}
/* 回り込みを解除 */
.clear {
	clear: both; 
}

HTML

<div id="contents">
	<div id="main">
		横並びにしたいブロック１
	</div>
	<div id="side">
		横並びにしたいブロック２
	</div>
</div>

これで二つのブロックが横並びになりました。回り込みの解除も忘れずに。
これをしなければ横並びにしたブロックより下のブロックまで浮いてしまいます。

回り込み解除の方法は、他にも「clearfix」などがあります。
>> 【CSS】clearfixを使って回り込みを解除する

floatを使って隣り合った要素の幅合計が100%（親要素の幅）を超えないように注意します。
100%を超えた場合、入りきらずに下に落ちてしまうカラム落ち現象が起こってしまいます。

また、floatを使った要素に padding や border を使わないようにしましょう。
IEでは解釈にバグがあり、padding、borderを含めたものを要素のサイズとして
認識している為、これもカラム落ちの原因になります。

floatを使う際の注意点

• floatを使って隣り合った要素の幅合計が100%（親要素の幅）を超えてはいけない
• floatを使った後は、必ず回り込みを解除する
• floatで回り込みしている要素にclearを使ってはいけない
• floatを使った要素にpaddingやborderを使う際、IEではバグが生じるので使用しない

floatを使った際、カラム落ちや想定外の挙動をしたときは上記のチェックをすると
何か原因が見つかるかもしれません。