CSS block 表組 position:absolute;

質問

まったくの初心者です。
本当の初心者なので、凄いことをしていたり
説明が分かりにくいかもしれませんが、
ご教授、よろしくお願い致します＊

・blocka の長方形が上
・上記blockaの下を
　blockb blockc blockdに縦に分ける

これで四角のまとまりができます。

・この四角のまとまり、の右側をbody指定しました。

blocka blockb blockc blockdを#FFFFFFに。

bodyを#CCCC99にしたいです。

下を書いたのですが、

.contents{
width:700px;
background-color:#FFFFFF;

背景色#FFFFFFが、div.blocka、だけに反映されるんです。

div.blockb、div.blockc、div.blockdには、

body{
margin:0px;
padding:0px;
background-color:#CCCC99;
}

bodyの#CCCC99が反映されています。

改善できる方法をご存じないでしょうか。
私のおかしな説明で簡単に理解できるかどうか判りませんが
よろしくお願い致します＊

*****************************************************
/*ページのレイアウト用css*/

body{
margin:0px;
padding:0px;
background-color:#CCCC99;
}

body a img{
border: none;
}

.contents{
width:700px;
background-color:#FFFFFF;
}

div.blocka {
width:500px;
height:150px;
margin-left:100px;
}

div.blockb {
width:100px;
float: left;
}

div.blockc {
width:200px;
position:absolute;
left:100px;
}

div.blockd {
width:200px;
position:absolute;
left:300px;
}

回答No.3

vista2446

blockbに指定した回り込みを解除していないことが、contentsを伸ばせない理由だと思います。
contentsにoverflowを書き加えるか、回り込みを解除しましょう。
【例】
overflow: auto;
<br style="clear: both;">

回答No.2

bavarois

htmlの構造も見ないと答えようがないです。
.contentsはblocka,b,c,dとは別の何かですか？
それともblocka,b,c,dどれかを包んでいるモノですか？

回答No.1

MrYoYoYo

最終的にどうしたいのかがわからないのですが、

absoluteを指定したボックスが正しい位置に来ていない気がします。
div.blockc とdiv.blockd に適当な背景色を指定して試してみてください。