alguien puede ayudarme con alineación de divs en html y css

skunkthebest · #1 (**permalink**) 19/11/2013, 08:16

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>

<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"/></div>
<div class="hor"><table class="horario">

<tr>
<td rowspan="2">Laborables:</td>
<td align="right">9:00 - 13:30 </td>
</tr>
<tr>
<td>&nbsp&nbsp16: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>

</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>

<div id="rc5"></div>
<div class="clear"></div>
<div id="footer"><div class="fleft"></div><div class="fright"></div><div class="fcenter"></div></div>
</div>
<div class="clear"></div>
</body>
</html>

CSS:

skunkthebest · #2 (**permalink**) 19/11/2013, 08:20

CSS:

.inner_copy {/*background-color:#fff600;*/ height:50px; /*border:0;color:#f00;clear:left;float:left;width:5 0% !important;margin:-100% 0 0 0;/*overflow:hidden;line-height:0;padding:0;font-size:11px;*/}

.fleft {float:left}

.fright {float:right}

.fcenter {float:none;margin:0 auto;text-align:center}

.fclear {clear:both}

body {margin:0px auto;font-size:13px;font-family:arial;color:#444;background:fixed; background-image:url(../images/fondo2.jpg);background-repeat:repeat-x; /*background-position:center;background:#fbc75f*/}
.fondo{position:absolute; z-index:-1;}
.outer {width:942px;text-align:left;margin:0px auto;/*background-color:#ff00f0;*/ height:100px;}
#headimage {/*background-color:#00f;*/width:345px;height:100px;color:#000;font-family:"Stencil";font-size:28px;padding-top:40px;letter-spacing:2px;/*background-image:url(../images/flowers2.jpg);background-repeat:no-repeat;*/float:left;margin-bottom:2px;/*background-color:#fff;*/}
.phone{float:right; margin-top:10px;}
#rc1 {/*background-image:url(../images/rc12.jpg);*/background-repeat:no-repeat;width:16px;height:130px;float:left; margin-bottom:10px;/*background-color:#000;*/}
#headerbg {/*background-color:#050;*//*background-image:url(../images/bg2.jpg);*/background-repeat:repeat-x;width:570px;height:140px;float:left;padding-left:11px;}
.name {text-transform:uppercase;color:#000;font-family:"Stencil";font-size:36px;padding-top:40px;letter-spacing:2px;height:100px;width:180px;float:inherit ;}
.name2 {color:#0079B5}
.tag {/*background-color:#0f0;*/font-weight:bold;color:#555;font-size:12px; letter-spacing:2px;float:left; padding-top:50px;/*background-color:#000;*/}
.hor {/*background-color:#f00;*/ height:100px;width:250px;float:right;margin-top:25px}
.horario{font-size:16px;font-family:"Century Gothic";margin-left:40px; margin-top:20px;}
/*.logo {padding-bottom:20px;}*/
.menu{background-image:url(../images/fondo-menu.jpg);background-repeat:repeat-x;/*background:#3f3a32;*/ width:942px; height:50px; margin-bottom: 10px;}
#left-nav {width:250px;float:left;background-image:url(../images/left.jpg);background-repeat:no-repeat;background:#fff}
#right-nav {width:682px;float:left;background-image:url(../images/right.jpg);background-repeat:no-repeat;margin-left:10px;background:#fff}
#gap2 {width:10px;height:100px;float:left;font-size:1px}
#news-bg {width:200px;height:158px;padding-top:10px;text-align:left;border-bottom:1px dashed #D2D2D2;margin:0 auto 5px auto}
.gap {height:0;font-size:1px;clear:left}
.date {width:66px;height:18px;background:#5C9910;color:# fff;font-family:tahoma;font-size:11px;font-weight:bold;line-height:18px;padding-left:6px}
.news-txt {text-align:justify;color:#3B3B3B;font-family:tahoma;font-size:11px;padding-top:6px}
a {color:#177ABD;text-decoration:underline}
a:hover {color:#177ABD;text-decoration:none}
.read-more {font-size:11px;height:20px;line-height:20px;text-transform:uppercase;font-weight:bold;font-family:tahoma}
.read-more a {color:#1170B0;text-decoration:underline}
.read-more a:hover {color:#1170B0;text-decoration:none}
#main {text-align:justify;padding:20px}
#main img {float:left;width:180px;margin:10px;border:2px solid #999}
.heading {background-image:url(../images/fondo-menu.jpg);background-repeat:repeat-x;height:45px;line-height:45px;padding-left:25px;text-transform:uppercase;font-weight:bold;color:#fff;font-family:"trebuchet MS";font-size:15px;text-align:left}
.leftcolumn {width:200px;padding-top:5px;padding-left:20px;float:left}
.leftcolumn ul {list-style-type:none;padding-left:0;margin:0;text-align:left;width:100%;padding-top:2px}
.leftcolumn ul li {padding-top:6px;padding-bottom:6px;border-bottom:1px solid #E8D9BD;margin:0}
.leftcolumn ul li a {text-align:left;padding-left:20px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#4E4739}
.leftcolumn ul li a:hover {color:#4E4739;padding-left:20px;text-decoration:underline}
#rc4 {background-image:url(../images/rc4.gif);background-repeat:no-repeat;width:9px;height:59px;float:left;font-size:1px;margin-top:10px;margin-left:13%;}
#rc5 {background-image:url(../images/rc5.gif);background-repeat:no-repeat;width:9px;height:59px;font-size:1px;margin-top:10px;float:left}
#bottom-bg {width:924px;background:#fff;height:59px;float:lef t;margin-top:10px;/*margin-left:40px;*/}
.clear {clear:both}
#bottom {width:680px;/*padding-top:10px*/;margin:0 auto;}
.sap3 {width:1px;float:left; height:32px;line-height:32px;color:#000;}
.bottomlink {width:132px;text-align:center;height:32px;line-height:32px;font-weight:bold;text-transform:uppercase;float:left;font-family:"trebuchet MS";font-size:12px; padding-top:10px;}
.bottomlink a {color:#fff;text-decoration:none}
.bottomlink a:hover {text-decoration:none;color:#ffae00}
#footer {padding:11px;color:#fff}

skunkthebest · #3 (**permalink**) 19/11/2013, 08:25

el problema esta en los div rc4, rc5 y bottom, pero pongo todo por si hay algo arriba que me dejado y provoca eso, muchas garcias, un saludo.