CSSで文字が流れ込んでしまいます

質問

CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。
clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。
どのようにしたらいいでしょうか。

body {
margin-top: 0;
background: #30689D;
text-align: center;
}

#header{
width: 760px;
margin-left: auto;
　　　margin-right: auto;
background: #E2E2E2;
}

#container{
width: 760px;
margin-left: auto;
　　　margin-right: auto;
background: #FFFFFF;
text-align: left;
}

#wrap {
padding: 0px;
}

#leftside{
width: 170px;
float: left;
background: #FFFFFF;
}

#photo{
width: 570px;
float: left;
margin-left: 10px
background: #FFFFFF;
}

#news{
width: 570px;
margin-left: 10px
background: #FFFFFF;
}

#footer{
width: 760px;
margin-left: auto;
margin-right: auto;
padding: 10px 0px 10px 0px;
background: #E2E2E2;
text-align: right;
}

p { margin: 0;
padding: 0;
}

-----HTML

<div id="header">ヘッド</div>

<div id="container">

<div id="wrap">
<div id="leftside">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<div id="photo">
<p>写真を入れたいところ</p>
</div>
<div id="news">

<p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p>

<div id="footer">フッターく</div>

回答No.2

noname#19206 · ベストアンサー

bodyのwidth:640px;をIEが無視しているのだと思います。（外したらIE/Fx同じ要に表示されました。）
あと、左右のmarginをautoにしてもIEではブロックレベル要素がセンタリングされないので注意してください。
http://www.mozilla.gr.jp/standards/webtips0004.html

余談：FireFoxではなくFirefoxです。
本家などでは特によく注意されるのでお気をつけください。
http://www.mozilla-japan.org/support/firefox/faq#spell-abbreviate

お礼

ありがとうございました。
結局、右部分に左部分のmarginをとることで解決しそうです。
Firefoxはとっても参考になりました！

回答No.1

cyokokichi

body {
width: 760px;
margin:auto 0;
background: #30689D;
}

#header{
background: #E2E2E2;
text-align: center;
}

#container{
background: #FFFFFF;
}

#leftside{
width: 170px;
float: left;
background: #FFFFFF;
}

#photo{
background: #FFFFFF;
}

#news{
margin-left: 170px
background: #FFFFFF;
}

#footer{
width: 760px;
margin-left: auto;
margin-right: auto;
padding: 10px 0px 10px 0px;
background: #E2E2E2;
text-align: right;
clear: both;
}

p { margin: 0;
padding: 0;
}

-----HTML

<div id="header">ヘッド</div>

<div id="container">

<div id="leftside">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>

<div id="news">
<div id="photo">
<p>写真を入れたいところ</p>
</div>

<p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p>
</div>

</div>

<div id="footer">フッターく</div>

参考URL：

http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#floats

お礼

流れ込みは解消しないようです・・・。
ありがとうございました。