float例
①HTML
ヘッダー
サイドメニュー
コンテンツ
※下記図のようになる
②CSSで全体、レイアウトの設定。pの幅高さ設定。
/* 全体の設定ここから */
body{
background-color: #999999;
color: #FFFFFF;
}
/* 全体の設定ここまで */
/* レイアウト設定ここから */
div#wrapper{
width: 600px;
height: 500px;
margin: 0px;
padding: 0px;
}
p#head{
margin: 0px;
padding: 0px;
width: 600px;
height: 100px;
background-color: #0000CC;
}
p#side{
margin: 0px;
padding: 0px;
width: 200px;
height: 300px;
}
p#contents{
margin: 0px;
padding: 0px;
width: 400px;
height: 300px;
background-color: #993333;
}
p#footer{
margin: 0px;
padding: 0px;
width: 600px;
height: 100px;
background-color: #FF9900;
}
/* レイアウト設定ここまで */
③floatの設定
p#side{
margin: 0px;
padding: 0px;
width: 200px;
height: 300px;
background-color: #000033;
float: left;
}
p#contents{
margin: 0px;
padding: 0px;
width: 400px;
height: 300px;
background-color: #993333;
float: left;
}
p#footer{
margin: 0px;
padding: 0px;
width: 600px;
height: 100px;
background-color: #FF9900;
clear: both;
}
/* レイアウト設定ここまで */
④ページをセンター配置にする
/* レイアウト設定ここから */
div#wrapper{
width: 600px;
height: 500px;
margin: 0px auto 0px;
padding: 0px;
}
＜IE（６）の場合＞
XML宣言を外さないとセンターになりません。
