How do I control the width of the footer in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta name="keywords" content="Dick Stout, Metal Detecting, FMDAC, Treasure Hunting, coins, coinhunting, relics, prospecting, search, treasure, White's, Garrett, Minelab,
searchcoil, Western and Eastern, Recovery, Research">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Inquisitive Eye</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css" type="text/css"/>
<style type="text/css">
body {
background: black;
font-size:100%;
margin:0;
padding:0;
}
#container {
width: 95%;
min-width:990px;/*keep BG color from stopping short*/
background: black;/*header BG color moved to here*/
}
#header {
width: 990px;
text-align: center;
margin:0 auto;/*center it up in the container div*/
padding: 100px 0;
color:#000;
}
#header:after { /*contain header floats and allow dropdowns to overflow past header bottom*/
clear:both;
display:block;
height: 0;
font-size:0;
}
#header img {
float:right;
border:4px solid 000;
}
#sidebar {
width: 12em;
font-size:40px;
}
#MainContent {
background: #FFA07A;
margin-left:5em;
margin-right:5em;
padding:10px 20px 0 1em;
}
/*=== Begin Nav Styles ===*/
#nav, #nav ul {
float:left;
width:176px;/*180px total with 2px borders*/
margin:0;
padding:0;
list-style:none;
background:black;/*for testing only, remove when done*/
border:2px solid #000;
}
#nav li {
position:relative;/* set containing block for AP sub ul */
float:left;/*kill IE whitespace bug*/
width:100%;
height: 45.5px;
text-align:center;/*center the text*/
}
#nav li a {
display:block;/*use block instead of float for IE6 */
width:100%;/*IE needs a width*/
/*height:3em; remove height to allow text to wrap*/
padding:.65em 0;/*set padding on top and bottom to create more height*/
text-decoration:underline;
color: tan;
font-weight:bold;
font-size:1em;
}
/* --- Text and Bg colors on hover ---*/
#nav li:hover, #nav li.sfhover {
background:#333;
visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a, #nav li.sfhover a { color:#FFF }
#nav li:hover li a, #nav li.sfhover li a { color:#000 }
#nav li li:hover a, #nav li li.sfhover a {
background:#333;
color:#FFF
}
/* ------ Sub UL Drop Down ------ */
#nav ul {
position:absolute;
width:176px;
left:100%;
top:-2px;/*recover top border (use "0" without borders)*/
margin-left:-999em;/* hide the sub ul */
background: #F5DEB3;/* IE needs some sort of BG on the nested ul */
}
#nav li:hover ul, #nav li.sfhover ul { margin-left:0;/* reveal the sub ul on li:hover */ }
/*=== Begin Footer ===*/
#footer {
width:100%;
clear:both;
}
#footer p {
margin:0;
padding:10px 0;
background:#DDD;
text-align:center;
font-size:1em;
}
.clearfloat {
clear:both;
height:0;
font-size:0;
}
</style>
<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<ul id="nav">
<li><a href="Bio2.html">Artist Bio</a></li>
<li><a href="Equip.html">Equipment</a></li>
<li><a href="Nature.html">Travel »</a>
<ul>
<li><a href="Travel.html">Texas</a></li>
<li><a href="Travel.html">Louisiana</a></li>
<li><a href="Bill.html">Mexico</a></li>
<li><a href="Oldfolks.html">Arkansas</a></li>
<li><a href="Bill.html">France</a></li>
<li><a href="Bill.html">Other</a></li>
</ul>
</li>
<li> <a href="Travel.html">Nature »</a>
<ul>
<li><a href="Bill.html">Flowers</a></li>
<li><a href="Oldfolks.html">Butterflies</a></li>
<li><a href="Bill.html">Birds</a></li>
<li><a href="Animals2.html">Wildlife</a></li>
<li><a href="Bill.html">Insects</a></li>
</ul>
<li><a href="Food.html">Food</a></li>
<li><a href="Portraits.html">Portraits</a></li>
<li><a href="Coinhunting.html">Black & White</a></li>
<li><a href="clubs.html">Abstract</a></li>
<li><a href="clubs.html">World Today</a></li>
<li><a href="inthefield.html">In The Field</a></li>
<li><a href="ending.html">My Message</a></li>
<li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
<br>
</ul>
<img src="images/BioPhoto9.jpg" width="800" height="530"/>
<br>
<br>
</div>
<br>
<div id="footer">
<p>Copyright © 2011 Fay Stout. All Rights Reserved</p>
</div>
<!--end #footer-->
<br>
</body>
</html>