…ここからが続き

IE6のバグ：例

まずはサンプルを見て下さい。

IE6で見るとレイアウト崩れがおこっています。

XHTML

<div id="contents">
<h1>contents</h1>

<div id="main">
<h2>main</h2>
</div>

<div id="sub">
<h2>sub</h2>
</div>

<!--/ #contents--></div>

CSS

div#contents	{
	width: 560px;
	background: #999;
	margin: 0 auto;
	height: 200px;
}
div#contents #main	{
	width: 340px;
	background: #006;
	height: 120px;
	float: left;
	margin-left: 24px;
}
div#contents  #sub	{
	width: 160px;
	background: #900;
	height: 120px;
	float: right;
	margin-right: 24px;
}

※分かりやすい用にdivに色をつけ、heightを指定しています。

本来なら下記画像の用になるはずですよね...

IE7やFireFoxでは上記の用に表示されていると思うんですが、IE6はどういう分けか25pxを約50pxと倍の解釈をし、横幅が大きくなったdivはカラム落ちしてしまうって感じなんです。

IE6のバグ：対策1　paddingで解決

変更するCSSはmainで指定したmargin-left: 24px;とsubで指定していたmargin-right: 24px;をcontentsの方でpaddingの左右に24pxずつとってあげたらいいんですよね。

CSS

div#contents	{
	width: 560px;
	background: #999;
	margin: 0 auto;
	height: 200px;
	padding-right: 24px;
	padding-left: 24px;
}
div#contents #main	{
	width: 340px;
	background: #006;
	height: 120px;
	float: left;
}
div#contents  #sub	{
	width: 160px;
	background: #900;
	height: 120px;
	float: right;
}

これでIE6でもレイアウト崩れをおこす心配はないです。

IE6のバグ：対策2　アンダースコアハックで解決

IE限定バグの為ハックで対応するって方法です。
デザインなどの関係で、どうしてもpaddingで指定する事が出来ない場合はこの方法を使います。

CSS

div#contents	{
	width: 560px;
	background: #999;
	margin: 0 auto;
	height: 200px;
}
div#contents #main	{
	width: 340px;
	background: #006;
	height: 120px;
	float: left;
	margin-left: 24px;
	_margin-left: 12px;
}
div#contents  #sub	{
	width: 160px;
	background: #900;
	height: 120px;
	float: right;
	margin-right: 24px;
	_margin-right: 12px;
}

IE6のバグ：その他の解決方法

上記以外にもdivなどを追加する方法やfloatをdisplay: inline;にする方法があるんですが、個人的に使う事はありません。理由としては下記の通りです。

• 個人的に無駄なdivは追加したくない。
• inlineにしてしまうと、フォントサイズを大きくした場合レイアウト崩れを起こしてしまう。

CSSレイアウトでIEとの違いを出来るだけ出さないようにするには、今回の「paddingで解決」で説明したように、divの親要素でpadding指定をしてくと、大きなレイアウト崩れはおきにくいと思います。 それ以外にも慣れていない人は、こまめにブラウザチェックをしながら作っていくと良いと思いますよ。

全部完成してから、レイアウト崩れを発見しても原因の場所をつきとめるのってけっこう手間のかかる作業だと思いますし、マメにチェックしていれば、崩れた要因は直ぐに見つける事が出来ますからね。
後は慣れです。