[dir]ホームページ作成総合コミュの緊急です。コードのミスを教えてください、お願いします。

質問があります。

只今会社のホームページを作っているのですが、どうしてもコンテンツがずれてしまいます。

画像1の様な商品紹介ページを作りたいのですが、初心者という事もあってか、作り方がわかりません。

divでboxを作って、今後更新しやすいような構造にしたいのですが、最初でつまずいております。

画像2のようなコンテンツ同士に隙間のようなものができてしまいます。

そして赤いコンテンツ部分が一段下にずれてしまっています。

問題解決方法なにかありますでしょうか？

bodyのコンテンツの中の要素
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

　　　　　<div class="goods-header">

<h4>
商品情報
</h4>

<div id="goods-top">
<p>
グッズトップへ
</p>
</div>

<hr size="1" color="#999999" style="border-style:dotted" width="800">

</div>

　　　　　 <div class="goods-zonebox">

　　　　　<div class="goods-leftzone">

<div id="goods-category">

<p>a</p>

</div>

　　　　　</div>

　　　　　<div class="goods-rightzone">

<div id="goods-category2">

<p>a</p>

</div>

　　　　　</div>

cssの内容
ーーーーーーーーーーーーーーーーーー

.goods-zonebox{width:800px; height:400px;
background-color: #aabbcc;
　　　　　　　　　}

.goods-leftzone{width:190px; height:auto;
background-color: #aaffff;
float:left;
　　　　　　　　　　padding: 0;}

#goods-category{text-align: center;
width:180px; height:80px;
background-color: #aabbff;}

.goods-rightzone{width:600px; height:auto;
background-color: #aabbff;
float:right;
padding: 0;}

#goods-category2{text-align: center;
width:180px; height:80px;
background-color: #ffaabb;
　　　　　　　　　　}

.goods-header{width:800px; height:50px;
background-color: #aaffff;
padding: 0;margin: 0;}

#goods-top{margin-top:5px;
font-size: small;
float:right;
color:#696969;}

h4{float:left;
font-size: medium;
font-weight: 500;
margin-top:10px;
margin-bottom:10px;
color:#696969;}

何か不備がわかりますでしょうか？

それか、このような作り方じゃない方がうまくいくというアドバイスがありましたら、教えて頂きたいです。

色々と説明不足だと思いますが、アドバイスよろしくお願いします。

トピは問題が解決し次第、削除致します。

コメント(2)

最初
全て
最新の40件

[1] mixiユーザー 08月12日 15:12

float:right; 　とfloat:leftt; は一緒に使えないです。

[2] mixiユーザー 08月12日 15:20

http://www.ronmom.net/　うちの会社のページです。宣伝ではないです。このページの中ほどに無料でホームページが作れるサービスがあります。誰でもとは言いませんが、悠久アルファ-300さんなら、コンテンツをじゅうじつさせるのなら、いちいちコードを書かないで済むし、無料なのでよいと思います。がんばってください。とても便利ですよ。

ログインすると、みんなのコメントがもっと見れるよ