CSS Positioning

[Studio472]

Should be easy buy I can't figure out whats wrong...

I have a fixed width container that will keep the whole page in the center. For some reason, the container has a 5 or 10 px buffer at the top. Almost a margin. If I take out the margin tag, I get the same results... I can't figure out where this is coming from.

<style type="text/css">

#container {
margin: 0px auto;
width: 900px;
height: 900px;
}

#colorbar {
width: 900px;
height: 2px;
background-color: #71AFB7;
}

#menu {
float: left;
width: 225px;
height: 100%;
background : url(leftbar1.jpg);
background-repeat : no-repeat;
background-color: #71AFB7;
padding-top: 3px;
}

#main {
float: left;
width: 675px;
height: 100%;
background : url(csback5.jpg);
background-repeat : no-repeat;
background-position: 75px 350px;
padding-top: 0px;
}

body {
text-align: center;
}

p, li, ul {
text-align: left;
font-family: arial;
padding: 0px 15px;
color : #014962;
font-size : 14px;
}

h1 {
text-align: left;
text-indent : 25px;
font-style : italic;
font-size: 20pt;
color:#72AFB6;
font-family:Verdana;
}

</style>

 

[rarepearldesign]

body {
text-align: center;
margin:0px;
top:0px;
}

That will do it.

 

[Studio472]

Thanks Rare,

That worked. I'm confused as to why though. Because every div element is within the 'body'?

I thought body was more or less for organization of text.

 

[rarepearldesign]

the body is essentially the outermost div with its parent being the browser window. By default that div (the body) has a margin so you need to remove them.

 

[RAJO]

try this one :

body {
text-align: center;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
}