IE6、floatでwidth:50%の要素を左右に並べる

Read More

HTML+CSS。
floatを使ってwidth:50%の要素を左右に並べてみる。


左右への振り分けにはdivタグを利用する。


左のdivタグにfloat:leftとwidth:50%、
右のdivタグにfloat:rightとwidth:50%
を指定。



成功の画面例。
FirefoxやChrome、IE8などでは普通の指定で問題ない。



失敗の画面例。
IE6やIE7では崩れることがある。
崩れない人は画面幅を持ってリサイズを繰り返せばなる。




さて、IE6と7でも正しく表示させるには以下のようなCSSにする。

■CSS
body {
  background:yellow;
}

div.left { /* 左 */
  width:50%;
  float:left;
  background:red;
  color:white;
  text-align:center;
}

div.right { /* 右 */
  width:50%;
  *width:49.99%; /* ここキモ */
  float:right;
  background:blue;
  color:white;
  text-align:center;
}

div.over { /* 包括用 */
  background:white;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}
clearfixについてはまた別の機会に。


■HTML
エリアチェック
<div class="over clearfix">
<div class="left">A</div>
<div class="right">B</div>
</div>
エリアチェック




さてIE6などで実行してみると、

バッチシ!


もちろん他のモダンブラウザでも問題ない。



ちなみにIEに限らず、FirefoxもChromeも小数点以下を解釈してくれましたが何故かOperaはダメだった。
# おそらく49%と解釈されている


あと、もしIEで0.01%分の隙間が見えて気になるようなら、divタグを包括しているdivタグに、青か赤色を指定すればいいだけの話。


ちゃんちゃん


Category "HTML・JS・CSS" の最新記事