CODEWITHSUNDEEP
htmlcsstagswrapper
Spartan Man
Spartan Man

Reputation: 55

Why does my wrapper not work in HTML?

This is my HTML website code:

<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>

And this is my 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 */

The contents within this HTML file is somehow not bound by the wrapper, even though all the content is within the wrapper class. Is there something missing from it?

Also if you feel you cannot answer the question, feel free to post up a code detailing how a wrapper should be set. Thanks

Upvotes: 0

Views: 2610

Answers (2)

Undefined
Undefined

Reputation: 11431

Add overflow: hidden; to your wrapper div. That should sort it.

Upvotes: 2

Last Rose Studios
Last Rose Studios

Reputation: 2481

Your code is working properly from what I can tell. What I see is that your two p elements are breaking out of it. Since they are all one word, the browser has no idea how to break it up or split it, so rather than wrapping it on a new line as it would if it had spaces in it, it's continuing out of the box.

There is a css3 property word-wrap that could help in these circumstances, p { word-wrap:break-word; } though in this case I would recommend simply adding spaces to your test content (or copying some loremipsum.)

Upvotes: 3

Related Questions