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
■HTML
さてIE6などで実行してみると、
バッチシ!
もちろん他のモダンブラウザでも問題ない。
ちなみにIEに限らず、FirefoxもChromeも小数点以下を解釈してくれましたが何故かOperaはダメだった。
# おそらく49%と解釈されている
あと、もしIEで0.01%分の隙間が見えて気になるようなら、divタグを包括しているdivタグに、青か赤色を指定すればいいだけの話。
ちゃんちゃん
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" の最新記事
- マトリックス風な画面を動的に生成するページ (0)
- [CSS]checkboxとテキストの位置がずれるのを直す (0)
- [Javascript]ウィンドウを閉じるwindow.close()が効かない (0)
- [CSS]連番のIDやクラスをまとめて指定する書き方 (0)
- 本サイトのfont-familyを変更してみた (0)
- [HTML・JS・CSS]プロパティとアトリビュートの違い (4)
- [知らなかった]form要素のaction属性に指定するURLの末尾のスラッシュを省略すると (7)
- [CSS]ライン(border)に点線を使うとページスクロールが重くなった (2)
- [CSS]画面をスクロールしたときにサイドバーの要素を追尾させる方法 (0)
- input type="submit" でボタンに画像を使う方法 (6)