IE6でfloatしたボックスのmarginの値が2倍になるバグの対処方法

CSSレイアウト初心者がまずぶつかる壁がおそらくこのバグだと思います。

まずはサンプルソースを見てみて下さい。
サンプルをダウンロード。

HTML

<div id="container">
	<div id="leftContents"></div>
	<div id="rightContents"></div>
</div>

CSS

#container	{
	width: 500px;
	height: auto;
}
#leftContents	{
	float: left;
	width: 180px;
	height: 200px;
	background: #80A852;
	margin-right: 10px;
	margin-left: 10px;
}
#rightContents	{
	float: right;
	width: 290px;
	height: 200px;
	background: #E67306;
	margin-right: 10px;
}

※サンプルで見てみたい人の為に各idに色つけてあります。

この場合だと下図のようになると思いますよね？

だけどIE6は駄々っこなので、この横に指定したmarginを2倍とってしまいます(実質20pxずつとってしまいます。)

対処方法はいくつかあるのでご紹介します。

そもそもmarginを指定しない。

親要素にpaddingを指定して子要素でのmarginをやめちゃうってのも手です。

CSS

#container	{
	width: 480px;
	height: auto;
	padding: 0 10px 0 10px;
}
#leftContents	{
	float: left;
	width: 180px;
	height: 200px;
	background: #80A852;
}
#rightContents	{
	float: right;
	width: 290px;
	height: 200px;
	background: #E67306;
}

※その場合は親要素のwidthから20px引きましょう。
元々はborderもpaddingも無かったので純粋に横幅=500pxだったものにpaddingを指定してあげたので
左padding10px+右padding10px+width480px=500px
って感じになります。

アンダースコアハックでIE6のみに指定する。

出来ればCSSハックはさけたいところなので、使わなくて済むやり方を見つけれたらそっちにしましょうね。

CSS

#container	{
	width: 500px;
	height: auto;
}
#leftContents	{
	display: inline;
	float: left;
	width: 180px;
	height: 200px;
	background: #80A852;
	_margin: 0 5px 0 5px;
	margin: 0 10px 0 10px;
}
#rightContents	{
	display: inline;
	float: right;
	width: 290px;
	height: 200px;
	background: #E67306;
	_margin: 0 5px 0 0;
	margin: 0 10px 0 0;
}

IE6が2倍とるなら半分で指定してやるって方法です。
IE6以外は通常どおり指定します。
ちなみにmarginと_marginの順番が変わると作用しません。

スターハックでも同じような事が出来ます。

display: inline;を使ってみるとあら不思議

CSS

#container	{
	width: 500px;
	height: auto;
}
#leftContents	{
	display: inline;
	float: left;
	width: 180px;
	height: 200px;
	background: #80A852;
	margin: 0 10px 0 10px;
}
#rightContents	{
	display: inline;
	float: right;
	width: 290px;
	height: 200px;
	background: #E67306;
	margin: 0 10px 0 0;
}

これだけで治ります。。。がブロック要素をインライン要素に変えてるので、個人的になんか好きじゃなくてほとんど使いません。

IE6のみインライン要素するってんなら許せるけど。。。完璧個人的こだわりです。すいませんでした＞＜

ひとまずこれだけおさえておけば、あんまり困る事は無いと思います。