CSSの形がデータの取得量によって崩れてしまいます。

質問

今まで、CGI(Perl)でHTML::TemplateとCGI.pmを用いてアプリケーションを作成しておりました。今回、初めてCSSを使ってみることにしたのですが、<TMPL_LOOP>を使用して、データベースから検索データの取得量によってHP全体の縦幅が変わる仕組みになっております。
FIREFOXでは、コンテンツに関するところは特に問題なのですが、それにともないMENUの表示で新しくデータの来たところの範囲は色がつきません。
また、IEでは、MENUの横にコンテンツがこず、下にきてしまいます。
何か解決方法をご存じの形よろしくおねがいします。
Style.css

body{
background-attachment: fixed;
background-image: url(Logo.jpg);
background-repeat: no-repeat;
background-position: 1200px 30px;
}

#container{
width: 1515px;
margin-left:auto;
margin-right:auto;

}

#banner_left{
background:url(left.JPG);
float:left;
width:215px;
height:67px;
}

#banner_right{
background:url(title.jpg);
background-repeat:no-repeat;
float:right;
width:1300px;
height:67px;
}

#middle_left{
float:left;
background:#CCCCCC;
color:white;
width:215px;
height:20px;
}

#middle_right{
float:right;
width:1300px;
height:20px;
background:#585858;
}

#menu{
float:left;
width:215px;
background:#F5F5F5;
}

#content{
float:right;
width:1300px;
background:#fff;
}

#foot{
clear:both;
text-align:center;
font-size:15px;
width:1515px;
height:20px;
color:white;
background:#585858;
}

回答No.2

ORUKA1951

画像の文字が見えません。
幅420px、高さ314pxでjpegで作成して示してください。

補足

そうでしたか、基本的なことを理解していなくて失礼いたしました.
今後そうします.

回答No.1

ORUKA1951

そもそも、floatを使う場面ではないですね。floatは、文章内に画像を配置するときに、文書をその周囲に回りこませるためのものですよ。
　特にIEのfloatの解釈はおかしいし、ブラウザによって解釈が分かれるプロパティです。本来の目的以外に使用しないほうが無難です。
　最近、本当によく見かける方法ですが、根本的に考え方が間違っています。
　誰かがばら撒いている。？？？

　きちんと、position:absoluteを使いましょう。

　それはそうと、width:1515px;って何ですか？私のディスプレイは、横幅1270px、一般的には、幅が800pxの狭い端末でもスクロールしなくて済むようにデザインしなきゃ・・・

補足

御回答ありがとうございます。
インターネットで検索して,でてきたサイトをみながらつくりました。
http://hac-design.com/css/layout.html

これは、なんとなくでwidth:1515px;にしました。
JPGの幅が215だったので、じゃ、右側は1300にしようと思ったからです。何も考えていません。
そもそも。中にはいっているチャートが横にも長いので、横幅を定義しても仕方ないなと思っていたからです。
なにかCSSを勉強する際に、おすすめのサイトがあれば教えてくださるとうれしいです。
正直、システムに関することがまだあまりわかってないもので、ご迷惑をおかけします。