2Column 4box Fixed L-hlv

2C_4box_ Fixed_LeftMenu

  • 2Columun 4BOX
  • #header>#content(wrapper)>#menu(wrapper)>#footer
  • XML宣言あり
  • 文字コード:UTF-8

<div id="container">
<div id="header">#header</div>
<div id="wrapper">
<div id="content">#content</div>
<div id="menu">#menu</div>
</div>
<div id="footer">#footer</div>
*{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;}

Floatとpositionを同時に使ったとき、IEでposition:absoluteした要素が消える
深刻なバグが発生する事がありますが、このレイアウトCSSではそのバグが発生します。
バグの起きる現象や対策の詳しい内容について、改めて書くのは面倒なので以下のサイトを参照のこと。

そのバグを回避するために#wrapperを使ってます。
コレが無いとIEで#headerが行方不明になるのですが、#header直下にブロック要素を配置しても回避できるってことなので、
#wrapperを消した上で、こんなような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で囲っておいた方が楽かなとは思いますが。

“2Column_4box_Fixed_L-hlv” をダウンロード

2C_4box_Fixed_L-hlv.zip – 1088 回のダウンロード – 1.98 KB

クリエイティブ・コモンズ・ライセンス

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください