Fri, 2014-03-28 17:57
I am expecting #background color to extend the full width of the browser but its not. #header1 with margin: 0 auto; and fixed width: 820px; is centered. HELP!
CSS:
body {
margin-top: 0;
margin-right: 10%;
margin-left: 10%;
}
#header1 {
margin: 0 auto;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 5px;
padding-right: 10px;
background-color: #333333;
font-family: "Century Gothic", Century Gothic;
width: 820px;
font-size: 40;
color: #000033;
}
#background {
width: 100%;
background-color: #333333;
}
HTML:
<body> <div id="background"><div id="header1">TEST<font size="4">Blah Blah content</font></div></div>
Fri, 2014-03-28 23:08
#1
Margin on body
Set the body's margin to zero, and put the background on body.
body { background-color: #333; color: white; /*If you specify color or background, specify the other*/ font: normal 100%/1.25 Century Gothic sans-serif; margin: 0; } p { font-size: 1em; } h1 { background-color: #333; color: #003; /*this is a bad choice, dark green against a dark gray*/ margin: .67em auto; /*.67em is the default top and bottom margins for h1*/ width: 820px; }
There is no purpose in div#header1. Use the proper heading tag, e.g. <h1>.
The <font> tag has not been valid since 1997. Don't use it.
Div#background serves no purpose.
Here is a proper markup:
<body> <h1>TEST</h1> <p>Blah Blah content</p> </body>
cheers,
gary