So you guys were so helpful yesterday that I thought I would ask another question. There is unnecissary white space on the right side of the page, you can't see it until you scroll over to the right, But I have no Idea why it is there. My website is http://spencedesign.netau.net/squids.html and my code is:
* {
padding:0px;
margin:0px;
}
#header {
position: relative;
width: auto;
height:200px;
padding:0px 0px 0px 5px;
}
#body {
background-color: #2C5197;
margin-top: 0px;
padding: 1px 1px 3px 1px ;
width: auto;
}
#nav ul {
width: 100%;
float: left;
margin: 0 0 0 0;
padding: 0;
list-style: none;
background-color: #fff;
position: absolute;
top: 162px;
left: 550px;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 25px 8px 25px;
text-decoration: none;
font-weight: bold;
font-size: 14pt;
font-family: sans-serif;
color: #2C5197;
border-right: 1px solid #2C5197;
}
#nav li a:hover {
color: #ffffff;
background-color: #2C5197;
}
.active {
color: #ffffff;
background-color: #2C5197;
}
And my HTML code is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Squids </title>
<link rel="stylesheet" type="text/css" href="squids.css" />
</head>
<body>
<!-- Header -->
<div id="header" >
<p> Header </p>
</div>
<!-- End of Header -->
<!--Nav Bar-->
<div id="nav">
<ul>
<li class="active"> <a href="#" > <font color="white"> Home </font> </a> </li>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> Home </a> </li>
</ul>
</div>
<!--End Of Nav Bar-->
<div id="body" >
<p> Content </p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<!-- Clock Flash Player -->
<!-- <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="500" height="150" name="GameID">
<param name="movie" value="simpleclock-500x150.swf">
<embed src="simpleclock-500x150.swf" width="500" height="150"
quality="high" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" name="GameID">
</embed></object> -->
<!-- End of Clock Flash Player -->
</body>
</html>