텍스트가 포함되어 있지 않습니다.

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; 
}​ 

텍스트 내부 내가 사업부의 마진을 설정하더라도 그 경계 외부 흐르고 있습니다.

누군가가 문제를 말해 줄 수 있습니까?

감사합니다.

SenileSage.

Answer 1

대부분의 브라우저는 너무 긴 단어를 어기는 방법을 모르고 있기 때문에 약간의 도움을 주어야합니다.

word-break:break-all;을 #sidebarcontainer에 추가하십시오. 여기에 W3Schools에 대한 자세한 정보가 있습니다.

Answer 2

텍스트에는 공백이 없으므로 줄 바꿈을 할 수 없습니다. overflow:hidden;을 #sidebarcontainer에 추가하면 오버플로가 숨겨지고 레이아웃이 유지됩니다.