I'm quite new to CSS / HTML, and can't find the cause of this little bugger. I want it gone, so that the banner and the nav bar touch each other. Any help is greatly appreciated!!
Here is the
code for the site. I took out some of the irrelevant
code.
<!DOCTYPE html>
<html>
<!-- *****CSS
CODE START*****-->
<style type="text/css">
#container
{
margin: 0 auto;
width: 900px;
background: #fff;
}
#header
{
margin-top: 0px;
}
#header h1 { margin: 0; }
#navigation
{
float: left;
width: 900px;
background: #333;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content-container
{
float: left;
width: 900px;
background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0;
}
#content
{
clear: left;
float: left;
width: 619px;
height: 720px;
padding: 10px 0;
margin: 0 0 0 0px;
display: inline;
overflow: auto;
}
#content h2 { margin: 0; color: #003D5D; padding:10px; }
#contentBody
{
padding:10px;
font-size:22px;
}
#aside
{
float: right;
width: 280px;
padding: 20px 0;
margin: 0 0px 0 0;
display: inline;
background: #cccccc;
height: 700px;
border-left: 1px solid #333 ;
}
#aside h3 { margin: 0 20px; color: #003D5D; font-family: Times New Roman; }
#asideText { margin: 0 20px; font-family: Times New Roman;}
#footer
{
clear: both;
background: #ccc;
text-align: right;
padding: 5px;
height: 1%;
border-top: 1px solid #333 ;
}
</style>
<!-- *****CSS
CODE END***** -->
<!-- *****HTML
CODE START***** -->
<body>
<div id="container">
<div id="header">
<img src = file:///Users/jduffy/Desktop/projectSite/banner1.jpg>
</img>
</div>
<div id="navigation">
<ul>
<li><a href="file:///Users/jduffy/Desktop/projectSite/home">Home</a></li>
<li><a href="file:///Users/jduffy/Desktop/projectSite/theProject">The Project</a></li>
<li><a href="file:///Users/jduffy/Desktop/projectSite/Pictures">Pictures</a></li>
<li><a href="file:///Users/jduffy/Desktop/projectSite/Contact">Contact us</a></li>
</ul>
</div>
<div id="content-container">
<div id="content">
<h2>
Page heading
</h2>
<div id="contentBody">
<p>
home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page
home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page
</p>
<p>
test2
</p>
<p>
test3
</p>
</div>
</div>
<div id="aside">
<div id="asideHeading">
<h3>
Aside Heading
</h3>
</div>
<div id="asideText">
<p>
test5
</p>
</div>
</div>
<div id="footer">
<text id="footerDate">0</text>
</div>
</div>
</div>
</body>
<!-- *****HTML
CODE END***** -->
</html>
<!-- *****JavaScript
CODE START***** -->
<script type="text/javascript">
/*date*/
var today = new Date();
document.getElementById("footerDate").innerHTML = today;
</script>
<!-- *****JavaScript
CODE END***** -->
