the body is taking priority over the wrapper [Archive]

View Full Version : 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

<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

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

<!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?
http://www.dynamicdrive.com/forums/attachment.php?attachmentid=3805&stc=1&d=1300334917

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