In my layout, I wanted everything to be centered using the "margin=0 auto" technique. However, I also needed the header and footer to expand to both sides when the browser window is enlarged. The challenge was that if I centered everything, the black background of the header and footer wouldn't expand infinitely. To solve this issue, I applied the background style directly to the header and footer elements and used a nested class (.container) to center the content within them. This approach, which is similar to what Stack Overflow does with their footer, worked well but I'm curious if there's a better way to achieve this without adding extra divs.
Here's a snippet of my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
This is an excerpt from my CSS:
/* reset */
* {
margin: 0;
padding: 0;
}
/* tags */
body {
background-color: #FFFFFF;
color: #5D5D5D;
font-family: Arial, "MS Trebuchet", sans-serif;
...