HTML CSSを、教えてください。

質問

お世話になります。

HTMLを始めたばかりで、
超初心者ですので、ご教授いただけたらと思います。

以下の図のような感じに並べたいです。

バックグラウンドには、青色。
赤と緑の部分は、画像配置、
また、右の緑の画像の上に,
オレンジのボタン配置を行いたいのです。

ただ、オレンジのボタン配置の仕方が、
なかなか出来ずにいます。

以下のHTMLとCSSには、
オレンジのボタンを入れずに、まず配置をしてみましたが…。
ただ、やはり右の緑の画像が、崩れてしまう感じも…。

オレンジのボタンを入れていただいた形で、
お願いできないでしょうか？
（オレンジ画像 width＝100　height＝50 でお願いします。）

【 HTML 】
<div class="Red"><img src="img/Red.png" width="300" height="50" />
<div class="contents">
<div class="Color_Box">
<div class="Green01"><img src="img/Green01.png" width="200" height="100" />
</div>
<div class="Green02"><img src="img/Green02.png" width="200" height="100" />
</div>
</div>
</div>
</div>

【 CSS 】
div.Red{
background:url(img/Bule.png) 0 100% repeat-x;
height:200px;
margin-top:45px;
text-align:center;
}

div.Color_box{
width:450px;
height:100px;
}
div.Green01{
width:200px;
padding-right:50px;
float:left;
}
div.Green02{
width:200px;
float:left;
}

回答No.2

ORUKA1951

これも「HTML、ＣＳＳ が、なかなかうまくいきません。 - Webデザイン・CSS - 教えて！goo( http://okwave.jp/qa/q8486859.html )」と同じです。
　先のHTMLそのままでスタイルシートだけ置き換えます。
★HTMLに文書構造しか書かれていないため、自在にデザイン変更できます。
★今回は印刷されるとまずいので印刷用スタイルシートを用意してある。
　　印刷プレビューで確認。
★構造とプレゼンテーションの分離
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )］より

★大事な事は、「どのようにプレゼンテーションしようかでHTMLを書かない!!」。これはHTML/CSSのもっと重要な基礎です。
＞HTMLを始めたばかりで、
　最初の最初にこれだけは身につけましょう。効率がずっとアップします。SEO的にも優れています。

<style type="text/css" media="screen">
<!--
div.header div.nav{/* header内のnav */
background:url(img/Bule.png) 0 100% repeat-x aqua;
height:150px;
margin-top:45px;
text-align:center;
position:relative;
text-align:center;
line-height:50px;
}
div.header div.nav ol{list-style:none;margin:auto;width:450px;height:100%;position:relative;}
div.header div.nav ol li{position:absolute;top:10px;left:75px;width:300px;height:50px;background:red url();}
div.header div.nav ol li+li{width:200px;top:70px;left:0;background:lime url();}
div.header div.nav ol li+li+li{left:290px;}
div.header div.nav ol li a{display:block;width:100%;height:100%;}
div.header div.nav ol li a[href="/Books"]{width:100px;height:25px;margin:15px 50px;background-color:yellow;line-height:25px;font-size:0.7em;}
div.header div.nav ol li+li+li+li{display:none;}
-->
</style>
<style type="text/css" media="print">
div.header div.nav a:after{content:"\A URL( http://hoge.com" attr(href) " )";white-space:pre;}
</style>

回答No.1

outbrave

div.Color_Box{
width:450px;
height:100px;
margin: auto;
}

Color_box ではなく Color_Box です。