Buenas, tengo un problema, empezé a desarrollar una web a partir de una plantilla en html y css y despues de haber modificado muchas cosas y todo esta bien pero los divs de la barra inferior se me han movido hacia la izquierda, puedo centrarlos poniendolo un margin-left al primer div ya que todos son float left, pero entonces cuando cambio de resolución la pagina, el resto se me adapta bien al cambio de resolución pero la barra inferior se desmonta y me vuelto loco buscando el error y no consigo arreglarlo, si alguien me pudiera echar una manita, muchas gracias de antemano.
os copio el codigo fuente html y el css
HTML:
<!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=iso-8859-1" />
<title>BADABICI</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--<img class="fondo" src="images/leaving-the-bike-behind.jpg" alt="" height="100%" width="100%"/>-->
<div class="outer">
<div id="rc1"></div>
<div id="headerbg">
<div class="name">BADABICI<br> SPORT</div>
<div class="tag"><img class="logo" src="images/logo_neg.png" alt="" border="0" height="67px" width="100px"/><!--Eslogan o frase de la tienda.--></div>
<div class="hor"><table class="horario">
<!--<tr>
<td>Horario:</td>
<td></td>
</tr>-->
<tr>
<td rowspan="2">Laborables:</td>
<td align="right"><!--  -->9:00 - 13:30 </td>
</tr>
<tr>
<td>  16:30 - 20:30</td>
</tr>
<tr>
<td>Sabado:</td>
<td align="right"><!--  -->9:00 - 13:30</td>
</tr>
</table></div>
</div>
<div id="headimage">
<table class="phone">
<tr>
<td rowspan="2">
<img class="telefono" src="images/telefono.png" alt="" border="0" height="50px" width="50px"/>
</td>
<td>93 381 19 43</td>
</tr>
<tr>
<td>607 24 07 17</td>
</tr>
</table>
<!--<table class="horario">
<tr>
<td rowspan="2">Laborables:</td>
<td>  9:00 - 13:30 </td>
</tr>
<tr>
<td> 16:30 - 20:30</td>
</tr>
<tr>
<td>Sabado:</td>
<td>  9:00 - 13:30</td>
</tr>
</table> -->
</div><div class="inner_copy"></div>
<div style="clear:left; width:942px;"></div>
<div class="menu">
<div id="bottom">
<div class="sap3"><img src="images/separador.png" alt="" border="0" /></div>
<div class="bottomlink"><a href="#">Inicio</a></div><div class="sap3"><img src="images/separador.png" alt="" border="0" /></div>
<div class="bottomlink"><a href="#">Quienes somos</a></div><div class="sap3"><img src="images/separador.png" alt="" border="0" /></div>
<div class="bottomlink"><a href="#">Servicios</a></div><div class="sap3"><img src="images/separador.png" alt="" border="0" /></div>
<div class="bottomlink"><a href="#">Club</a></div><div class="sap3"><img src="images/separador.png" alt="" border="0" /></div>
<div class="bottomlink"><a href="#">Contacto</a></div><div class="sap3"><img src="images/separador.png" alt="" border="0" /></div>
</div>
</div>
<div id="left-nav">
<div class="heading">Articulos </div>
<div class="leftcolumn">
<ul>
<li><a href="#">Bicicletas</a></li>
<li><a href="#">Cascos</a></li>
<li><a href="#">Cuadros</a></li>
<li><a href="#">Pedales</a></li>
<li><a href="#">Botellas</a></li>
<li><a href="#">Llantas</a></li>
<li><a href="#">Frenos</a></li>
</ul>
</div><div class="clear"></div>
<div id="news-bg">
<div class="date">27.06.2009</div>
<div class="news-txt">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sapien enim, cursus in, aliquam sit amet, convallis eget, metus. Duis dui mi, varius at, lacinia eget, ullamcorper et, tortor. Pellentesque ac pede. Lorem ipsum dolor
</div>
<div><div class="read-more" style="float:right"><a href="#">Leer mas</a></div></div>
</div>
<div id="news-bg">
<div class="date">28.06.2009</div>
<div class="news-txt">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sapien enim, cursus in, aliquam sit amet, convallis eget, metus. Duis dui mi, varius at, lacinia eget, ullamcorper et, tortor. Pellentesque ac pede. Lorem ipsum dolor
</div>
<div><div class="read-more" style="float:right"><a href="#">Leer mas</a></div></div>
</div>
</div>
<div id="right-nav">
<div class="heading">Bienvenidos a Badabici</div>
<div id="main">
<p>
Aenean dapibus, leo vitae eleifend porta, sem ipsum nonummy est, eu fermentum arcu lectus in lacus. Vestibulum tristique metus eu lorem. Pellentesque sed erat. Morbi pharetra condimentum massa. Vestibulum vel nulla at eros porta tempus. Fusce at lorem. Nulla facilisis. Phasellus nisl. Integer id massa nec tellus rutrum pellentesque. Mauris orci mauris, dictum vitae, varius eget, vestibulum quis, risus. Pellentesque dictum, magna vitae pulvinar interdum, orci lacus posuere neque, et lacinia dui eros ut erat. Ut purus. Nullam ac tellus eteros condimentum interdum
</p>
<a href="#"><img src="images/art1.jpg" alt="" border="0" /></a><a href="#"><img src="images/art2.jpg" alt="" border="0" /></a><a href="#"><img src="images/art3.jpg" alt="" border="0" /></a>
<div class="clear"></div>
<p>
Aenean dapibus, leo vitae eleifend porta, sem ipsum nonummy est, eu fermentum arcu lectus in lacus. Vestibulum tristique metus eu lorem. Pellentesque sed erat. Morbi pharetra condimentum massa. Vestibulum vel nulla at eros porta tempus. Fusce at lorem. Nulla facilisis. Phasellus nisl. Integer id massa nec tellus rutrum pellentesque. Mauris orci mauris, dictum vitae, varius eget, vestibulum quis, risus. Pellentesque dictum, magna vitae pulvinar interdum, orci lacus posuere neque, et lacinia dui eros ut erat. Ut purus. Nullam ac tellus et eros condimentum interdum
</p>
<p>
Aenean dapibus, leo vitae eleifend porta, sem ipsum nonummy est, eu fermentum arcu lectus in lacus. Vestibulum tristique metus eu lorem. Pellentesque sed erat. Morbi pharetra condimentum massa. Vestibulum vel nulla at eros porta tempus. Fusce at lorem. Nulla facilisis. Phasellus nisl. Integer id massa nec tellus rutrum pellentesque. Mauris orci mauris, dictum vitae, varius eget, vestibulum quis, risus. Pellentesque dictum, magna vitae pulvinar interdum, orci lacus posuere neque, et lacinia dui eros ut erat. Ut purus. Nullam ac tellus eteros condimentum interdum
</p>
<p>
Aenean dapibus, leo vitae eleifend porta, sem ipsum nonummy est, eu fermentum arcu lectus in lacus. Vestibulum tristique metus eu lorem. Pellentesque sed erat. Morbi pharetra condimentum massa. Vestibulum vel nulla at eros porta tempus. Fusce at lorem. Nulla facilisis. Phasellus nisl. Integer id massa nec tellus rutrum pellentesque. Mauris orci mauris, dictum vitae, varius eget, vestibulum quis, risus. Pellentesque dictum, magna vitae pulvinar interdum, orci lacus posuere neque, et lacinia dui eros ut erat. Ut purus. Nullam ac tellus eteros condimentum interdum
</p>
</div>
</div>
</div>
<div class="clear"></div>
<div id="rc4"></div>
<div id="bottom-bg">
<!--<div id="bottom">
<div class="bottomlink"><a href="#">Homepage</a></div><div class="sap3">|</div>
<div class="bottomlink"><a href="#">About Us</a></div><div class="sap3">|</div>
<div class="bottomlink"><a href="#">Products</a></div><div class="sap3">|</div>
<div class="bottomlink"><a href="#">Services</a></div><div class="sap3">|</div>
<div class="bottomlink"><a href="#">Contact</a></div>
</div>-->
</div>
<div id="rc5"></div>
<div class="clear"></div>
<div id="footer"><div class="fleft"><!--Copyright Statement--></div><div class="fright"><!--Buena colección de plantillas web gratis <a href="http://www.mejoresplantillasgratis.es" target="_blank">aquí</a>.--></div><div class="fcenter"><!--Design by: <a href="http://www.templatesperfect.com/">Templatesperfect.com</a>--></div></div>
</div>
<div class="clear"></div>
</body>
</html>
CSS: