CSSでブラウザごとにレイアウトが崩れたりします。

質問

はじめまして。
現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。
細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。

■■■■■■　　　　■＝ヘッダー
□□●●●●　　　　□＝メニュー
□□●●●●　　　　●＝コンテンツ（中身）1
□□○○○○　　　　○＝コンテンツ（中身）2
□□○○○○　　　　▲＝フッター
▲▲▲▲▲▲

このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。
そこで、問題の崩れているレイアウトですが、メニュー（□）とコンテンツ（○+●）の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー（□）の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。
※コンテンツ（○+●）部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。

ちなみにこの現象はIE７のみでして、IE６やfirefoxなどでは正常に表示されました。
全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、

どうか教えていただけないでしょうか？

body{
margin:0px;
padding:0px;
text-align:center;
}
/* ラッパーの設定*/
#wrap{
position:relative;
width:790px;
background-color:#FFFFFF;
margin:0px auto;
text-align:left;
}
/* ヘッダーの設定*/
#head{
width:790px;
height:100px;
background-color:#FFFFFF;
}
/* 左側の設定*/
#left{
width:210px;
height:auto;
float:left;
background-color:#FFFFFF;
}
/* 右側の設定*/
#right{
width:580px;
height:950px;
float:right;
background-color:#FFFFFF;
margin-bottom: 15px;
}
#sub_main {
width: 550px;
margin-left: 15px;
background-color: #FFFFFF;
margin-top: 10px;
height: auto;
margin-bottom: 5px;
}
#sub_main2 {
width: 550px;
margin-left: 15px;
margin-top: 15px;
background-color: #FFFFFF;
height: auto;
}
#foot{
position:relative;
width:100%;
height:auto;
background-color:#CCFFCC;
clear:both;
float: left;
}

※sub_main1,2は●と○になります。
どうかよろしくお願いいたします。

回答No.1

SAYKA · ベストアンサー

簡易的な形

<div style="width:6em"><!-- 全体 -->
　<div>■■■■■■</div>
　<div>
　　<div style="width:2em;float:left">
　　　□□
　　　□□
　　　□□
　　　□□
　　</div>
　　<div style="width:4em;float:left">
　　　<div>
　　　　●●●●
　　　　●●●●
　　　</div>
　　　<div>
　　　　○○○○
　　　　○○○○
　　　</div>
　　</div>
　　<div style="clear:both"></div>
　</div>
　<div>▲▲▲▲▲▲</div>
</div>

あとはclearfixかな
http://www.google.co.jp/search?q=clearfix&hl=ja&lr=lang_ja

お礼

ありがとうございます。
clearfix。。。確か見かけたことはありますが、ここで出てくるとわ。

このような問題はどのように組んでも起こるものなのでしょうか？

ちなみに質問内容に間違いがありました。
#right{
width:580px;
height:950px⇒auto;
float:right;
background-color:#FFFFFF;
margin-bottom: 15px;
}

いろいろ試してたらそのままコピーしていました。
全てがautoという前提でご回答いただければ幸いです。

SAYKAさんありがとうございます。
clearfix・・・勉強してみます。

本当にありがとうございました。