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は●と○になります。
どうかよろしくお願いいたします。
お礼
結局、メニュー専用ページを作ることにしました。 回答ありがとうございました。
補足
写真はいい考えですね(^_^) あっ！！ サブメニューにリンクが入っているんですけど・・・ なんか、いい方法ありませんかねぇ～