CLUB.AKITOMO.NET

（もちろん、それ以前のバージョンも）

ブラウザのバグマニアでもないので、すべてのバグを知っているわけではないのだけれど、スタイルシート（CSS）に関するバグはある程度回避方法を学んできたつもり。
しかし、最近またひとつむかつくバグに遭遇した。

もちろん、一般的には既知の問題点として挙がっているものなのだろうが、探しても解決方法が見つからなかった。

左ボックス: width: 100px; float: left;
右ボックス: margin-left: 110px;

一般的に良く使われるfloatを使った2カラムのスタイルだと思うが、モダンブラウザでは当然意図したデザイン――左ボックスが100pxで右ボックスとの間に10pxマージンがある状態になってくれる。
IE6でも、一見きちんと表示されているように見えるのだけれど、実は、左ボックスがなくなるあたり（左ボックスの高さ）で、右ボックスの中にあるテキストや画像が微妙に左によってしまう。

色をつけるとわかりやすい。（といってもモダンブラウザを使っている場合は正しく表示されるので、下のものを見てもわからない。）

少し違うが、以下の画像が先日イライラしながらIE6での見栄えをキャプチャしたもの。これは画像なのでモダンブラウザでもバグを確認できる。

ひとつ目の「SUB TITLE」及び「TEXT」は、青ボックス左端からやや離れているのに対し、ふたつ目の「SUB TITLE」及び「TEXT」は青ボックス左端にぴったりくっついている。
これは、赤ボックスの下端がちょうど一段落目の終わりあたりで終わっているので、それ以降に書いてある二段落目の「SUB TITLE」と「TEXT」が左に引き寄せられた図なのだ。

この現象は、左ボックスの高さが右ボックスの高さより小さい場合に起こる。左ボックスの高さが大きい場合は問題なく表示される。

それで、独自にいろいろ試してみたが、これの解決方法が見つからない。

今回このデザインを採用したサイトは、左右のボックスの高さがほぼ一定だったため、それに合わせ左ボックスにheightを指定し、強制的に左右のボックスの高さをそろえてしまうというゴリ技を使ったのだけれど、背景色を設定したり、コンテンツによって高さが可変するような状態では使えない。

プロデザイナーは、どう対応しているのだろうか?
絶対にtableは使いたくないし…。

「神様お願いです、早くIE6がこの世からなくなりますように…。
せめて、IE7を使ってくれますように…。」

IE7の自動更新が始まったといっても、どうやら順次拡大中っぽいので、私のリサーチではまだまだIE6が大部分を占めている。