semantic web

Perhaps my web search capabilities were on leave yesterday but I spent the better part of the morning trying to find the right way to center align a tableless layout. I must confess here that I have used the center tag all too often to fudge this effect. However, yesterday I was inspired to dig deep into the w3c to find the answer and I was frustrated that it took so long. Being a student of online learning I feel the need to republish this newly acquired knowledge in hopes of making that search easier for the next person.

Here is a page that uses the correct layout.

Before the CSS Zen Garden showed me the way I was using this code:
body {
text-align:center;
}

ie 5.5 and above would render this correctly. My content div would be right in the middle of the page, but in FireFox that content div would be stuck to the left side of the browser. Troubling. The reality is that text-align:center should only be used on text elements, so ie was rendering it incorrectly and FireFox was right, yet again.

This is the key that makes the whole thing work:

div#wrap {
margin:0 auto; /* auto puts the wrap div in the center of the page*/
position:relative; /* this is the key. the div must be relatively positioned*/
width:600px;
padding:0 14px;
background-color:#FFF;
border:6px solid #333;
}

If there is a better way to do this, please prove me wrong.