スタイルシートのレイアウト

スタイルシートのレイアウトで
それぞれに幅と高さと色を指定して
優先順位の高いcontentを右側に配置する方法

コメントタグの中

＃container {
width: 800px;
height: 600px;
background-color: #F00;
margin: 0 auto;
}
＃header {
width: 800px;
height: 150px;
background-color: #FFF;
}
＃nav {
width: 800px;
height: 50px;
background-color: #F01;
}
＃wrapper {
width: 800px;
height: 350px;
background-color: #00F;
}
＃content {
width: 600px;
height: 350px;
background-color: #0FF;
float: right;
}
＃sidebar {
width: 600px;
height: 200px;
background-color: #0FF;
float: left;
}
＃footer {
width: 800px;
height: 100px;
background-color: #FF2;
}

‐floatを入れると浮き上がるのでその隙間に
下にあるものが浮き上がって入ってしまう。
特に文字だと入り込みやすくなるのでfloatを使うときは
気をつけたほうが良い。

‐sidebarから書いた場合は左側に追い込んでいくので
contentもfloat:leftで良い。

‐floatを使ったら横に動かないようにwrapperで囲いを作ることが
とても大切。

　
‐containerのところに
margin: 0 auto;は上下０左右は自動という意味で
ブラウザに合わせて中央に表示されるようになる。