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%
を指定。
成功の画面例。
失敗の画面例。
崩れない人は画面幅を持ってリサイズを繰り返せばなる。
さて、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の末尾のスラッシュを省略すると (9)
- [CSS]ライン(border)に点線を使うとページスクロールが重くなった (2)
- [CSS]画面をスクロールしたときにサイドバーの要素を追尾させる方法 (0)
- input type="submit" でボタンに画像を使う方法 (6)