- 2008-03-07 (金) 21:01
- 5BOX
- 2Columun 5BOX
- #header>#menu>#extra>#content(wrapper)>#footer(wrapper)
- ＸＭＬ宣言あり
- 文字コード：UTF-8
- ダウンロード：2Column 5box Elastic TMLE
HTML:
CSS:
-
*{margin:0;padding:0;}
-
#container{margin:0; width:auto;}
-
#container:after {
-
content:".";
-
height:0px;
-
clear:both;
-
display: block;
-
visibility:hidden;
-
}
-
*+html #container { display:inline-block; }
-
#header{height:100px;width:250px;float:left;}
-
#menu {height:100px;}
-
#extra{height:400px;width:250px;float:left;}
-
#wrapper{margin-left:250px;}
-
#content{height:200px;}
-
#footer{height:5em;}
-
-
body{background-color:#B2B4BF;}
-
#container{border: 3px solid #181533}
-
#header{background-color:#212C87;}
-
#menu{background-color:#652B7D;}
-
#extra {background-color:#02787B;color:#03CACF;}
-
#content{background-color:#FFFFFF;}
-
#footer {background-color:#CC6699;}
- サンプルページ
- ダウンロード：2Column 5box Elastic TMLE
上と下がそれぞれ２カラムなレイアウト。
Floatによるポジショニングをするため、#contentと#footerを#wrapperに入れています。ClearFix使用。
#header>#content>#menu>#extra>#footer
という並び順もやれなくはないが、IE対策が激しく面倒なことになるのでオーソドックスな方にした。
関連記事
- Newer: 2Column 4box Fixed L-hlv
- Older: 2Column 4box Floating LeftMenu
