IEで、文章がwidthをはみでる

質問

ブログで日記を書いています。
左ブロックにメニューがあり、右ブロックが日記です。
各ブロックにwidthで幅を指定しています。
右ブロックの日記文章の１文章が、横に長いとブロックの幅が指定した幅を越えてしまい、左ブロックのメニューが下に移動してしまいます。
どのように対処すれば良いですか？

max-widthで、対処できませんでした。IE８には効かない・・・？

回答No.1

weakweak · ベストアンサー

とりあえずなんでwidth設定してるのに幅が可変するのかわかりませんが、
cssで
word-wrap:break-word
は試されましたか？

ちなみに下はfloatして段崩れを起こしたサイトをケーススタディで解説しているページです。
http://desperadoes.biz/style/dan/index.php

それとどういう風に書いているのでしょう。下記のような感じで示していただければわかりやすいです。

---HTML---
<div id="container">
<div id="header">ヘッダー部</div>
<div id="wrapper">
<div id="nav">メニュー部</div>
<div id="article">日記部</div>
</div>
<div id="footer">フッター部</div>
</div>
-----END_HTML-----

---CSS---
#container {
width : px;
}
#header {
width : px;
}
#wrapper{
width : px;
overflow : hidden; /* floatした子要素の高さを認識させるためのタグです */
}
#nav {
width : px;
float : left;
}
#article{
width : px;
float : left;
}
#footer{
width : px;
clear : both;
}
----END_CSS------

お礼

早速のご回答ありがとうございます。

＞word-wrap:break-word
問題が解決しました！ありがとうございます。
涙が出ます。

回答No.2

ORUKA1951

常識的にはありえないのですが・・
＞右ブロックの日記文章の１文章が、横に長いとブロックの幅が指定した幅を越えてしまい、左ブロックのメニューが下に移動してしまいます。

　これは、そのブロックがfloat処理されていることを示していて、かつ巾がauto(初期値)のままであることを示しています。

＞各ブロックにwidthで幅を指定しています。
　親のコンテナブロックに巾を指定していても、widthプロパティは継承しませんから、float指定された時点で親ブロックのwidthは消えてしまいます。このブロックにwidth:100%などを指定してください。

　本来は、コマ割(枠組み)にはfloatを使わないほうが良いのですが・・

お礼

ご回答ありがとうございます。
勉強になります。