I'm having trouble getting rid of a margin within my div's. I have five div's, container, footer, nav, banner and content.
All works fine but the content div has a gap between its self and the footer and I can't figure out how to get rid of it. I've tried to get rid of it with padding:0;margin:0; and still nothing.
The only way I have figured out how to get rid of it is to add border-bottom: 1px solid; to the content div but that does not leave the desired affect.
Ideas?
CSS
HTML
All works fine but the content div has a gap between its self and the footer and I can't figure out how to get rid of it. I've tried to get rid of it with padding:0;margin:0; and still nothing.
The only way I have figured out how to get rid of it is to add border-bottom: 1px solid; to the content div but that does not leave the desired affect.
Ideas?
CSS
Code:
body {
font-family:Georgia,"Times New Roman",Times,serif;
font-size:0.8em;
margin:0pt;
}
#container {
border:1px solid #000000;
color:#333333;
line-height:100%;
margin:0px auto;
width:800px;
}
#nav {
background-color:#9CCF31;
background-image:url(../images/banner_bottom.png);
background-repeat:no-repeat;
border-bottom:1px solid;
height:30px;
padding-right:10px;
text-align:right;
}
#banner {
background-color:#9CCF31;
background-image:url(../images/banner_top.png);
background-repeat:no-repeat;
height:90px;
}
#content {
background-color:#446A1B;
margin-bottom:100px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}
#footer {
background-color:#446A1B;
border-bottom:1px solid;
border-color:-moz-use-text-color #000000;
border-top:1px solid;
clear:both;
margin:0pt;
}
h1 {
color:#FFFFFF;
font-size:0.9em;
font-weight:bold;
margin:0pt;
padding:0pt;
}
h2 {
color:#FFFFFF;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:0.9em;
font-weight:normal;
margin:10px;
padding:0px;
position:relative;
}
h2 span {
position:absolute;
right:0pt;
}
h4 {
color:#000000;
font-family:Arial,sans-serif;
font-size:12px;
font-weight:bold;
margin:10px;
padding:0px;
}
a:link {
color:black;
}
a:hover {
color:black;
text-decoration:none;
}
a:visited {
color:black;
}
.icons {
margin-left:4px;
vertical-align:text-bottom;
}
ul.circle {
list-style-type:circle;
}
p {
color:#FFFFFF;
margin-top:0pt;
}HTML
Code:
<!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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>My Site Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" CONTENT="my meta description here" />
<meta name="keywords" CONTENT="my keywords here" />
</head>
<body>
<div id="container">
<div id="banner">
</div>
<div id="nav">
<a href="index.php">Home</a> <a href="sites.php">Sites</a> <a href="images.php">Images</a> <a href="resume.php">Resume</a> <a href="contact.php">Contact</a> <a href="aboutme.php"> About Me</a> <a href="blog" target="_blank">Blog</a> <a href="links.php">Links</a><br />
</div><div id="content">
<h1>Welcome</h1><br />
<p>My site info will go here
</p>
</div>
<div id="footer">
<h2>Created By <a href="mailto:[email protected]">Chris</a> <a href="http://validator.w3.org/check?uri=referer" target="_blank"><img src="images/xhtml.gif" alt="xhtml" width="80" height="15" border="0" class="icons" longdesc="images/xhtml.gif" /></a><a href="http://jigsaw.w3.org/css-validator/validator?uri=chrispoole.me.uk" target="_blank"><img src="images/css.gif" alt="css" width="80" height="15" border="0" class="icons" /></a><a href="http://getfirefox.com" target="_blank"><img src="images/firefox.png" alt="get firefox" width="80" height="15" border="0" class="icons" /></a></h2>
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2202428-3";
urchinTracker();
</script></body>
</html>