rwd 2 column layout その１

• 色と、幅、高さを指定して、#wrapperで囲んで、中の#mainと#side をfloat で並べた状態。

• #main はfloat: left; #sideはfloat: right; にしておく。rwdの時は両方ともfloat: left; にするよりも、この方が都合がいいのかもしれない。

• （本日の気付き）#containerを#headerなど、下に続く要素と幅を同じにすると、上のようになる。ここで、#container にpadding: 10px; すると、あら簡単。

• 最後に#header, nav, #wrapper にmargin-bottom: 10px;をつけるだけ。
• こんなに簡単だったか？

#container{
width: 940px;
margin: 0 auto;
background: #fff;
padding: 10px;
}
#header{
height: 200px;/*widthは指定しなければ親要素と同じになる。だから指定しない。*/
background: #C74747;
margin-bottom: 10px;
}
#nav{
height: 50px;
margin-bottom: 10px;
}
#wrapper{
overflow: hidden;
margin-bottom: 10px;
}
#main{
width: 570px;/*#mainと#sideで併せて930pxにする。間が10px*/
height: 400px;
background: #C7A747;
float: left;
}
#side{
width: 360px;
height: 400px;
background: #4747C7;
float: right;
}
#footer{
height: 100px;
background: #C747C7
}