html - テキストが含まれていない

Question

非常に基本的なレイアウトを作成しました。

http://jsfiddle.net/kK7Rk/

HTML

<div id="container">
    <div id="logocontainer">
    </div>
    <div id="navigationcontainer">
    </div>
    <div id="textcontainer">
    </div>
    <div id="sidebarcontainer">
        TEXTTEXTEXTTEXTTEXTEXTTEXTTEXTEXTTEXTTEXTEXTTEXTTEXTEXT.
    </div>
</div>​

CSS

* {
margin:0;
padding:0;
}
#container {
margin:0px auto;
width:600px;
height:1000px;
background:red;
}
#logocontainer {
float:left;
width:50%;
height:15%;
background:green;
}
#navigationcontainer {
float:right;
width:50%;
height:15%;
background:orange;
}
#textcontainer {
margin:10px;
float:left;
width:70%;
height:83.2%;
background:purple;
}
#sidebarcontainer {
margin:10px;
float:right;
width:23.33%;
background:yellow;
}​

divにマージンを設定したにもかかわらず、内部のテキストが境界の外側に流れています。

誰かが問題が何であるか教えてもらえますか？

ありがとう、

SenileSage。

Answer 1

ほとんどのブラウザは、非常に長い単語を分割する方法を知らないので、少し助けを与える必要があります。

に追加word-break:break-all;し#sidebarcontainerます。W3Schoolsに関する詳細情報は次のとおりです。

Answer 2

問題は、テキストに空白がないため、折り返すことができないことです。追加overflow:hidden;する#sidebarcontainerと、オーバーフローが非表示になり、レイアウトが保持されます。