div配置のことで質問です。

質問

div配置のことで質問です。

こんにちは。タイトル通りなのですが、divタグがうまく使えません。
いろいろなサイトを参照しましたが、解決できないのでこちらで質問させてください。

お聞きしたい事は3点あります。
（下の方に画像をつけているので参照しながらお願いします。）

1.画像上の黄色のdivくくりを水色の隣に持っていきたいということ
2.赤からオレンジまでの固まりをセンターに持っていきたいということ（横です）
3.紫のdivくくりをpadding:40;に指定すると上下左右に40pxずつ幅が広がってしまうのですが、サイズはwidth900×height500のまま内側に40px余白を作りたいということ

もしおわかりになる方がいらっしゃいましたら、教えていただけると幸いです。
どうぞよろしくお願いいたします。

■スタイルシート
/*------------------------------------------------------------------ */
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
background-color: #ffffff;
}
body div {
margin: 0 auto;
border : 0 ;
}
/*------------------------------------------------------------------ブロック要素 */
div.all {
width: 900px;
margin:0;
padding: 0px;
}
div.aka {
text-align: left;
width: 900px;
margin:0;
padding: 0px;
background-color: #ff0000;
}
div.murasaki {
font-size:10pt ;
text-align: left;
width: 900px;
height:300px;
margin:0;
padding:40px;
background-color: #aaaaff;
}
div.mizu {
font-size:10pt ;
text-align: left;
width: 500px;
margin:0;
padding:0px;
background-color: #00ffff;
}
div.kiiro {
font-size:10pt ;
text-align: left;
width: 400px;
margin:0;
padding:0px;
background-color: #ffff00;
}
div.orange {
font-size:10pt ;
text-align: right;
width: 900px;
margin:0;
padding: 0px;
background-color: #ff6600;
}

■ボディ内

<div class="all">
<!--ーーーーーーーー赤色-->
<div class="aka">
テスト
</div>

<!--ーーーーーーーー紫色-->
<div class="murasaki">
テスト
</div>
<!--ーーーーーーーー水色-->
<div class="mizu">
news<br />
<table cellspacing="0" cellpadding="0" width="500"><tr><td>
テスト
</td></tr></table>
</div>
<!--ーーーーーーーー黄色-->
<div class="kiiro">
topics<br />
<table cellspacing="0" cellpadding="0" width="400"><tr><td>
テスト
</td></tr></table>
</div>
<!--ーーーーーーーーフッター-->
<div class="orange">テスト</div>

</div>

長々とすみません。よろしくお願い致します。

回答No.1

nekomikekamo · ベストアンサー

とりあえず、CSSを修正。
3が不明です。紫は現状高さ300pxですが、500pxにしたいのでしょうか？

* {
margin: 0;
padding: 0;
}
body {
text-align: center;
background-color: #ffffff;
}
div.all {
text-align: left;
width: 900px;
margin:0 auto;
}
div.aka {
width: 900px;
background-color: #ff0000;
}
div.murasaki {
font-size:10pt;
width: 820px;
height:220px;
padding:40px;
background-color: #aaaaff;
}
div.mizu {
font-size:10pt ;
width: 500px;
float:left;
background-color: #00ffff;
}
div.kiiro {
font-size:10pt ;
width: 400px;
float:left;
background-color: #ffff00;
}
div.orange {
clear:left;
font-size:10pt ;
width: 900px;
background-color: #ff6600;
}

お礼

ありがとうございます。解決しました！
紫の高さは300にしたかったのですが、これで大丈夫です。
paddingの効果を、テーブルに使うcellspacing属性と同じだと思っていたために
３はうまくいかなかったようです。修正していただいたのを見て気づきました。

感覚でやってしまいすぎているようなので、もっとちゃんと勉強しようと思います。
ありがとうございました :-D　！