ラッパーがHTMLで動作しないのはなぜですか？

Question

これは私のHTMLのウェブサイトのコードです：

<div id="wrapper"> 

<div id="header"> 
<img src="images/MyBannerFinished.jpg" alt="Header" width="803" class="headerimage" /> 
</div> <!--- close Header---> 

<div id="navbar"> 
<ul id="nav"> 
<li><a href="#">Home</a></li> 
<li><a href="#">About Me</a></li> 
<li><a href="#">Finished Assignments</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div><!---Close Nav ---> 

<h2> 
<u>My report 1 </u> 
</h2> 

<p class="weeks"><u> Week 9</u></p> 
    <p>gas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srz </p> 
<p class="para">ddsaga34tr5sdfsafg34srzddsagas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srzgas34tr5sdfsafg34srz</p> 

<!--- Footer ---> 
<div id="footer">footer</div> 

</div> <!---Wrapper end ---> 

</body> 

そして、これが私のCSSです：

body 
{ 
padding:5px; 
} 

p 
{ 
margin:5px; 
padding:5px; 

} 


p.weeks 
{ 
font-size:25px; 
padding-left:inherit; 
text-align:center; 
margin: 0 auto; 
} 

/*End general*/ 

div#wrapper 
{ 
width:50em; 
margin: 0 auto; 
} 

div#header 
{ 
} 

#nav { 
    width:50em; 
margin: 0.5em 7em; 
} 

#nav ul 
{ 
list-style: none; 
padding: 0; 
margin: 0; 
} 

#nav li 
{ 
float: left; 
margin: 0 0.15em; 
} 


/* Hide from IE5-Mac \*/ 
#nav-menu li a 
{ 
float: none; 
} 
/* End hide */ 

このHTMLファイル内の内容を何とかしても、すべてかかわらず、ラッパーによって拘束されていませんコンテンツはラッパークラス内にあります。それに欠けているものはありますか？

また、質問に答えることができないと思われる場合は、ラッパーの設定方法を詳述するコードを自由に投稿してください。ありがとう

Answer 1

あなたのコードは、私が理解できるものから正しく動作しています。私が見ているのは、あなたの2つの要素がそれから壊れているということです。それらはすべて1つの単語なので、ブラウザーはそれを分解したり分割したりする方法を知らないので、空白がある場合と同じように新しい行にラップするのではなく、そのまま続けます。

これらの状況で役立つ可能性があるcss3プロパティのワードラップがあります.p {word-wrap：break-word; }この場合は、単にテストコンテンツにスペースを追加すること（またはいくつかのloremipsumをコピーすること）をお勧めします。

Answer 2

オーバーフローを追加：あなたのラッパーdivに。それはそれを並べ替えるべきです。