IE6のfloatを使った場面で片方のdivが下に落ちてしまう

ie6 css float

今さらIE6の件ですが、ハマってしまったのでメモ。

ie6のfloatでメイン部分が下に落ちるなぁと原因を探ってみたら、イタリック文字のせいで幅が増えてたのが原因っぽい。文章くらいしか変わらない2つのページで起きる起きないが分かれてたからインデント変えてみたり色々試してしまった。超不毛だ。

上でつぶやいてる通りなのですが、
今までの経験上、片方のdivが下に落ちてる場合は大抵、

  1. IE6のmarginのせいで幅が広がる
  2. そのせいで囲っているdivの幅以上になってしまう
  3. どちらかが落ちてしまう

という経験ばかりだったので、イタリック体になったときの文字幅の変化で落ちたらしいことに感心してしまいました。



具体的に最小サンプルを作ってみると

<div id="wrapper">
  <div id="sub">a</div>
  <div id="main">
    <ul><li>x</li></ul>
  </div>
</div>

というHTMLがあり、


そのデザインが

body {
  font-family:"ＭＳ Ｐゴシック"
  font-size:13px;
  margin:0;
  padding:0;
}

#wrapper {
  width:51px;
}
#sub {
  float:left;
}
#main {
  float:right;
}

というCSSになっている場合には左右に並ぶのですが、
# フォントサイズにもよると思うので、この状態でキレイに並ぶ最小幅のイメージと仮定して、



HTMLの

x

が

<em>x</em>

というイタリック体になると、文字に幅ができるせいかxが落ちてしまいます。



こういうのはフォント扱いに慣れてる人だと当たり前なんだろうけど、
普段フォント部分なんて触ることないから色々試行錯誤してしまいました。
とりあえずIE6でしか起こってなかったけど他でも起こることがあるのかな？
まぁ解決したからよしとします。