「Web標準」に拘ってCSSと格闘するのは結構疲れます。

きっと「こんなことで躓くのか!!」と嘆いている人がかなりいるハズでは?

「簡単なレイアウトだが“キッチリ”やりたい」場合は必ずあるのだが、それがどうしても上手くいかない。

外枠を640pxにして、その中に大小2個のボックスを配置したいとする。

大きい方を490px、小さい方を150pxにしたい。

ところが、こんな簡単なことができません。

そして、あーだこーだと妥協点を探して、IEで上手く表示されるようになったと思ったのも束の間、FireFoxだと崩れる。

結局のところキッチリレイアウトするために
width、margin、padding
を同時に指定しようとすると上手くいきません。

既にCSSと格闘してきた人たちにとっては「上手くいかないことが当たり前」のようですが、「490+150=640」にならないことが当たり前とは、システム開発をやってきた立場からすると許せないことです。

それにしてもwidth、margin、paddingの扱いが難しい。(デザイン上、1pxの闘いとなると)

そしてborderがどのように扱われているのか非常に怪しい。

回避策を探してみたところ下記のページが参考になった。
http://webmugi.seesaa.net/article/18469078.html

結果的に、このようにするとIEとFireFoxで見た目がなんとなく同じになったけど…
margin: 0;
↓
margin: 0 auto 0 auto;

相変わらず1pxずれて表示されてしまう。

テーブルを使えば3分で終わることが2時間闘っても解決せず…

ツイート