- 2008-03-08 (土) 22:53
- 5BOX
- 3Columun 5BOX
- #header>#content(wrapper)>#menu>#extra>#footer(wrapper)
- ＸＭＬ宣言あり
- 文字コード：UTF-8
- ダウンロード：3Col_5box_Elastic
HTML:
CSS:
-
*{margin:0;padding:0;}
-
#container{width:auto;height:1%;}
-
#header {height:80px;}
-
#menu{float:left;width:200px;margin-left:-100%;}
-
#extra{float:left;width:200px;margin-left:-200px;}
-
#wrapper{float:left;width:100%;}
-
#content {margin: 0 200px;}
-
#footer {clear:left;width:100%;height:50px;}
-
#menu,#extra,#content {height:300px;}
-
-
-
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;}
- サンプルページ
- ダウンロード：3Col_5box_Elastic
オーソドックスな３カラムレイアウト。
IE対策はホーリーハック。
関連記事
- Newer: [AS]FLVPlayBackでループ
- Older: 2Column 6box Elastic LeftExtra
