- 2008-03-07 (金) 22:14
- 4BOX
- 2Columun 4BOX
- #header>#content(wrapper)>#menu(wrapper)>#footer
- ＸＭＬ宣言あり
- 文字コード：UTF-8
- ダウンロード：2Column_4box_Fixed_L-hlv
HTML:
CSS:
-
*{margin:0;padding:0;}
-
#container{margin:0 auto;width:900px;position:relative;}
-
#header{height:80px;position:absolute;width:180px;top:0;left:0;}
-
#menu{height:300px;width:180px;float:left;margin-top:80px}
-
#content{height:400px;width:720px;float:right;}
-
#footer{clear:both;height:3em;}
-
-
* html body {text-align:center;}
-
* html #container {position:relative;text-align:left;}
-
* html #content {width:714px;}
-
-
body{background-color:#B2B4BF;}
-
#container{border: 3px solid #181533}
-
#header{background-color:#212C87;}
-
#menu{background-color:#652B7D;}
-
#content{background-color:#FFFFFF;}
-
#footer {background-color:#CC6699;}
- サンプルページ
- ダウンロード：2Column_4box_Fixed_L-hlv
Floatとpositionを同時に使ったとき、IEでposition:absoluteした要素が消える
深刻なバグが発生する事がありますが、このレイアウトＣＳＳではそのバグが発生します。
バグの起きる現象や対策の詳しい内容について、改めて書くのは面倒なので以下のサイトを参照のこと。
- IE/Win: Disappearing position:absolute boxes near to floats and clears
- IEで絶対配置（position:absolute）のボックスが消えるバグの検証
- IEでのCSSのバグを回避するhasLayout | コリス
そのバグを回避するために#wrapperを使ってます。
コレが無いとIEで#headerが行方不明になるのですが、#header直下にブロック要素を配置しても回避できるってことなので、
#wrapperを消した上で、こんなようなjavascriptを使って
JavaScript:
-
window.onload = function() {
-
if(window.navigator.userAgent.indexOf("MSIE")!=-1){
-
var block = document.createElement('div');
-
var header = document.getElementById('header');
-
var next = header.nextSibling;
-
header.parentNode.insertBefore(block,next);
-
}
-
}
IEだけ擬似的に#header直下にdivを突っ込むって手もあります。
ただjavascriptオフにすると#headerが消えるので、オフ時の回避策が必要になることを考えると
素直に#wrapperで囲っておいた方が楽かなとは思いますが。
関連記事
- Newer: 2Column 6box Elastic LeftExtra
- Older: 2Column 5box Elastic TMLE
