body {
text-align: center; /* centers the container */
}
#container {
margin: 0 auto; /* Centers container horizontally */
width: 750px; /* must specify a width */
text-align: left; /* left aligns containers elements, IE compliance */
}
#header {
/*header goes in here */
}
#content {
/*content goes in here */
}
#nav {
/* nav attributes go in here */
}
#footer {
/*footer goes in here */
}
XHTML:
<html>
<head>
<title>example of a container wrapping div</title>
</head>
<body>
<div id="container"> <!-- container wraps around all of the content, it enables the centering of the content as a whole -->
<div id="header"> <!-- Header stuff goes here -->
</div>
<div id="content"> <!-- Content stuff goes here -->
</div>
<div id="nav"> <!-- Navigation stuff goes here -->
</div>
<div id="footer"> <!-- Footer stuff goes here -->
</div>
</div> <!-- End of container div -->
</body>
</html>