Estoy como loco que no entiendo por que mi DIV de contenido cuando baja no baja el footer osea le pasa por encima, ya no se que hacerle quiza vosotros me podais ayudar, aqui dejo el codigo para que me ayudeis
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body,td,th {
font-family: Verdana, Geneva, sans-serif; margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
div#wraper {
width: 946px;
margin-left: auto;
margin-right: auto;
top: 0px;
margin-top: 0px;
padding-top: 0px;
background-color: #0F0;
position: relative;
}
div#header{
width: 946px;
height: 158px;
margin-left: auto;
margin-right: auto;
position: relative;
}
div#header-a{
width: 259px;
height: 100px;
float: left;
position: relative;
}
div#header-b{
width:300px;
height: 100px;
float: right;
position: relative;
}
div#header-menu{
width:946px;
height: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 3px;
}
div#content{
width: 946px;
margin-left: auto;
margin-right: auto;
top: 0px;
margin-top: 0px;
padding-top: 0px;
clear: both;
position: relative;
}
div#content-banner{
width: 946px;
height: 255px;
}
div#join{
width: 946px;
position: absolute;
height: 99px;
z-index: 1;
margin-top: 195px;
}
div#content-main{
width: 946px;
}
div#content-main-l{
width: 630px;
float: left;
}
div#content-main-r{
width: 316px;
height: 200px;
float: right;
}
div#footer{
width: 946px;
margin-left: auto;
margin-right: auto;
top: 0px;
background-color: #F00;
clear:both;
position: relative;
}
</style>
</head>
<body background="images/bg.png"><div id="wraper">
</div>
<div id="header">
<div id="header-menu"> <div id="header-a"><a href="#"><img src="images/logo.png" width="259" height="99" border="0" /></a></div>
<div id="header-b">
<img src="images/log.png" width="296" height="99" align="right" /></div></div> <div id="header-menu"> <a href="#"><img src="images/main_menu_02.jpg" width="191" height="55" border="0" /></a><a href="#"><img src="images/main_menu_03.jpg" width="165" height="55" border="0" /></a><a href="#"><img src="images/main_menu_04.jpg" width="134" height="55" border="0" /></a><a href="#"><img src="images/main_menu_05.jpg" width="116" height="55" border="0" /></a><a href="#"><img src="images/main_menu_06.jpg" width="185" height="55" border="0" /></a><a href="#"><img src="images/main_menu_07.jpg" width="155" height="55" border="0" /></a>
</div>
</div>
<div id="content">
<div id="content-banner">
<div id="join"><a href="#"><img src="images/sliderboton.png" width="946" height="99" border="0" align="bottom" /></a> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/funtions.js"></script>
<link href="scripts/style.css" rel="stylesheet" type="text/css" />
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="images/slide1.jpg" alt="" /></a>
<a href="#"><img src="images/slide2.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
</div>
</div></div>
<div id="content-header"><img src="images/main-content-banner_11.png" width="321" height="178" /><img src="images/main-content-banner_12.png" width="309" height="178" /><img src="images/main-content-banner_13.png" width="316" height="178" /></div>
<div id="content-main">
<div id="content-main-l"><img src="images/feeds_01.png" width="631" height="457" /></div><div id="content-main-r">
<p><img src="images/feeds_02.png" width="315" height="457" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
<br />
<br />
</p>
</div>
</div> <div id="footer"><br />
<br />
<br />
</div>
</div>
</body>
</html>