Hi,

I have this page designed in html and css. but what I can't understand is without mentioning any thing about the alignment of this page as center aligned, this page is center aligned for some reason. Generally as far as I understand this tag "text-align:center" if put in the main body of the page makes the page look center-aligned. But I have not done so. I am learning css on my own and am not an expert so please bear with me. Can any one please let me know as why this page is center aligned? Thanks,

This is the html code:


Here is the separate css sheet.


[php]body {
margin: 0px;
padding: 0px;
background-image: url('background.jpg');
}

#maincontainer {
width: 700px;
margin: 0px auto;
position: relative;border: red 4px dashed;
background-image:url('backgroundnew.jpg');padding-left:25px; padding-right:25px; padding-top:0px; padding-bottom:0px
}
#top {
top: 0px;
margin: 0px;
padding: 0px;
position: absolute;
}
#nav {
top: 59px;
margin: 0;
padding: 0;
position: absolute;
height: 20px;
width: 700px;
font: 9px Verdana, Arial, Helvetica, sans-serif;
}
#nav ul {
margin: 0;
padding: 0px 0px 0px 265px;
}
#nav li {
display:inline;
margin: 0;
padding: 0;
}
#nav li a {
font: bold 11px Verdana, Arial, Sans-Serif;
color: #666;
text-decoration: none;
}
#nav li a:hover {
color: #FF8000;
}
#mainimage {
top: 85px;
position: absolute;
}
#title {
top: 243px;
height: 35px;
width: 700px;
position: absolute;
background-image:url('title.gif');
padding: 0;
margin: 0
}
#title h1 {
font: bold 10px Verdana, Arial, Helvetica, Sans-Serif;
color: #fff;
margin: 5px 10px 4px 65px;
}
#testimonials {
top: 278px;
width: 350px;
height: 120px;
background-image: url('testimonialsback.gif');
position:absolute;
background-repeat: no-repeat
}
#testimonials h1 {
font: 12px Arial, Helvetica, sans-serif;
color: #666;
margin: 20px 0px 0px 0px;
}
#testimonials p {
font: 11px Arial, Helvetica, sans-serif;
color:#FF6600;
margin: 14px 0px 55px 5px;
}
#about {
top: 278px;
left: 365px;
width: 330px;
height: 150px;
position:absolute;
background-image:url('newback.gif');
}
#about h1 {
font: 12px Arial, Helvetica, sans-serif;
color: #666;
margin: 20px 0px 0px 6px;
}
#about p {
font: 11px/16px Arial, Helvetica, sans-serif;
color: #666666;
margin: 14px 15px 0px 5px;
}
#about a {
font: bold 11px Arial, Helvetica, sans-serif;
text-decoration:none;
color: #999;
margin: 0px 0px 0px 0px;
padding: 0;
}
#about a:hover {
color: #FF8000;
}
#about ul {
padding: 0;
list-style-image:url('arrow.gif');
color: #999; margin-left:25px; margin-right:0px; margin-top:10px; margin-bottom:0px

}
#about li {
font: 11px Arial, Helvetica, sans-serif;
color: #666;
margin: 0px 0px 15px 0px;
padding: 0;
margin: 2px;

}
#about li a {
color: #FF6600;
text-decoration:none;
}
#about li a:hover {
color: #333;
}
#downloadabout {
top: 299px;
left: 492px;
position: absolute;
width: 150px;
}
#downloadabout a {
font: bold 11px Arial, Helvetica, sans-serif;
text-decoration:none;
color: #999;
margin: 0px 0px 0px 0px;
padding: 0;
}
#downloadabout a:hover {
color: #FF8000;
}
#launch {
top: 299px;
left: 170px;
position:absolute;
}
#launch a {
font: bold 11px Arial, Helvetica, sans-serif;
text-decoration:none;
color: #999;
margin: 0px 0px 0px 0px;
padding: 0;
}
#launch a:hover {
color: #FF8000;
}
#download {
top: 299px;
left: 250px;
position:absolute;
}
#download a {
font: bold 11px Arial, Helvetica, sans-serif;
text-decoration:none;
color: #999;
margin: 0px 0px 0px 0px;
padding: 0;
}
#download a:hover {
color: #FF8000;
}
#testimonialcontent {
left: 80px;
top: 327px;
width: 255px;
position: absolute;
}
#testimonialcontent p {
font: 11px Arial, Helvetica, sans-serif;
color: #666666;
margin: 0px 0px 14px 0px;
}
#testimonialcontent a {
color: #FF6600;
text-decoration:none;
}
#testimonialcontent a:hover {
color: #333;
}
#footer {
position: absolute;
width: 690px;
bottom: 0;
background-image:url('bottom.gif');
margin: 0; padding-left:10px; padding-right:0px; padding-top:15px; padding-bottom:0px
}
#footer p {
font: 11px Arial, Helvetica, sans-serif;
color: #666;
margin: 0px 0px 7px 0px;
}
#footer a {
color:#FF9900;
text-decoration:none;
}
#footer a:hover {
color: #666666;
}
#footercontainer {
position: relative;
height: 780px;
width: 700px;
}
#footerlinks {
position: absolute;
width: 220px;
bottom: -3px;
left: 482px;
font: 11px Arial, Sans-serif;
color: #666666;
margin: 0;
padding: 2px 0px 0px 0px;
}
#footerlinks p {
margin: 0;
padding: 0px 0px 8px 0px;
text-align: right;
}
#footerlinks a {
font: 11px Arial, Helvetica, sans-serif;
color: #FF9900;
text-decoration: none;
}
#footerlinks a:hover {
color: #666666;
}
#google {
position: absolute;
top: 20px;
left: 485px;
height: 50px;
width: 220px;
} [/php]

this line:

is setting some of the margins on your '#maincontainer' div to be auto. auto means; take a proportion of the available space. Generally, if you set the left and right margins of something to be "auto" it has the effect of aligning it in the middle of the page. This only happens if you give something a specific size (or if it has a specific size). in this case, you are giving the main container a width of 700px; so left and right auto margins will each take ( 50% of ( the width of the page minus 700 px ) ); and that will center the maincontainer div.

Note, that this isn't the same as using text-align: center. text-align: center aligns 'text' (and certain objects) in a container around the container's horizontal center. But, margin-left:auto;margin-right:auto; aligns an object to the center of its container regardless of text alignment rules in that container.

Excellent reply my friend. I was trying very hard to get to grips with the whole idea of margin since being a newbie in the field of web design. Your explanation makes good sense. Here is something very similar to your reply that I just came across.

http://www.w3.org/TR/CSS21/visudet.html#blockwidth

Thanks a lot. Appreciated.

well defined.. easy to understand.. thanks!