the body is taking priority over the wrapper

**Johnnymushio** · 03-17-2011, 03:35 AM

basically i want to make the page 960px in width, centered on the page.

css

Code:

<style type="text/css">
#wrapper {
width: 960px;
background-color: #ffffff;
margin: 0 auto;
padding: 0;
text-align: left;
display: block;
}

body {
margin: 0 auto;
width: 960px;
}

#header {
background-color: #eeeeee;
text-align: center;
font-size: xx-large;
}

.nav {
width: 320px;
border: 1px solid;
border-color: #ffffff;
float: left;
margin: 0px;
padding: 0px;
}

.nav ul {
list-style-type:none;
margin: 0px;
padding: 0px;
}

.nav a {
display: block;
background-color: #000000;
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-family: arial;
margin: 0px;
padding: 0px;
}

.nav a:hover,a:active {
background-color:#dddddd;
color: #ff0000;
}

#content {
background-color: #dddddd;
}
</style>

html

Code:

<!DOCTYPE html>
<html><head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div id="wrapper">
<div id="header">Home</div>
<div class="nav">
<ul class="nav">
<li class="nav"><a href="codingexercise4.html">Home</a></li>
<li class="nav"><a href="about.html">About Us</a></li>
<li class="nav"><a href="courses.html">Courses</a></li>
<li class="nav"><a href="faculty.html">Faculty</a></li>
<li class="nav"><a href="#programs">Programs</a></li>
<li class="nav"><a href="#contact">Contact Us</a></li>
</ul>
</div>
<div id="content">
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
</div>
</div>
</body>
</html>

the wrapper div doesnt seem to be doing anything at all, and in order to achieve the effect I want I have to use the body div. see what happens when you remove the body css declarations. the page turns into 100% width. why?

**davelf** · 03-17-2011, 04:09 AM

hey it work, i already test it:

Code:

<!DOCTYPE html>
<html><head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#wrapper {
width: 960px;
background-color: #ffffff;
margin: 0 auto;
padding: 0;
text-align: left;
display: block;
}

body {
margin: 0 auto;
width: 960px;
}

#header {
background-color: #eeeeee;
text-align: center;
font-size: xx-large;
}

.nav {
width: 320px;
border: 1px solid;
border-color: #ffffff;
float: left;
margin: 0px;
padding: 0px;
}

.nav ul {
list-style-type:none;
margin: 0px;
padding: 0px;
}

.nav a {
display: block;
background-color: #000000;
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-family: arial;
margin: 0px;
padding: 0px;
}

.nav a:hover,a:active {
background-color:#dddddd;
color: #ff0000;
}

#content {
background-color: #dddddd;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="header">Home</div>
<div class="nav">
<ul class="nav">
<li class="nav"><a href="codingexercise4.html">Home</a></li>
<li class="nav"><a href="about.html">About Us</a></li>
<li class="nav"><a href="courses.html">Courses</a></li>
<li class="nav"><a href="faculty.html">Faculty</a></li>
<li class="nav"><a href="#programs">Programs</a></li>
<li class="nav"><a href="#contact">Contact Us</a></li>
</ul>
</div>
<div id="content">
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
</div>
</div>
</body>
</html>

i don't see any problem here?

**Johnnymushio** · 03-17-2011, 05:11 AM

thanks for replying

Yes, but why are the css declarations in the wrapper not working?

It only looks that way because the wrapper style wasnt doing anything, so I had to style the body instead. i should be able to style the wrapper alone and get the page to center.

if you remove the style from the body, the page doesnt style how it is told to in the wrapper

Thread: the body is taking priority over the wrapper

Thread Tools

Search Thread

the body is taking priority over the wrapper

Bookmarks

Bookmarks

Posting Permissions