Unable to find the cause of an annoying content gap in my HTML/CSS?
Posted
by
user1472747
on Stack Overflow
See other posts from Stack Overflow
or by user1472747
Published on 2012-07-06T15:01:44Z
Indexed on
2012/07/06
15:15 UTC
Read the original article
Hit count: 190
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***** -->
© Stack Overflow or respective owner
