Problema con Bordes (Ayuda porfavor)

Sr_Furia · #1 (**permalink**) 01/12/2009, 10:15

Hola, escribo esto despues de haber intentado hacer mil cosas para solucionarlo. Os pongo primero un croquis de la web es sencillo :

Ahora os enseño como me queda, para que veais lo que me ocurre, y podais ayudarme, como se ve en esta imagen, no se ven los bordes

Bueno queria que me dijeseis como puedo hacer para que al meter contenido, y consecuentemente se alargue la div CENTRO, se me alargue la plantilla, y que claro, pueda ver los bordes tambien.

Os pongo el codigo html y CSS para facilitar mas la posible ayuda :

Código CODIGO HTML:

Ver original<body>
<div id="web">
<div id="cabecera" style="clear:both"><img src="http://www.forosdelweb.com/f53/imagenes/cabecera.jpg"/></div>
<div id="contenedor">
<div id="izquierda">IZQUIERDA</div>
<div id="centro">CENTRO</div>
<div id="derecha">DERECHA</div>
</div>
<div id="footer">
<div id="f1"><img src="http://www.forosdelweb.com/f53/imagenes/fot-izq.jpg" width="35" height="57" /></div>
<div id="f2" align="center"></div>
<div id="f3"><img src="http://www.forosdelweb.com/f53/imagenes/fot-dch.jpg" width="35" height="57" /></div>
</div>
</div>
</body>

Código:

#web {
width:966px;
position:relative; 
margin-left: auto; 
margin-right: auto;
}


#cabecera {
   width:966px;
   height:153px;
}


#contenedor{
	width:938px;
	background:#CCC;
	clear:both;
	border-left:#F0F;
	border-left-style:solid;
	border-left:14px;
	border-right:#F0F;
	border-right-style:solid;
	border-right:14px;
	
}


#izquierda{
	background:#CCC;
	width:200px;
	background:#CCC;
	float:left;

}
#centro{
	background:#CCC;
	width:538px;
	background:#6CF;
	float:left;

}
#derecha{
	background:#CCC;
	width:200px;
	background:#CCC;
	float:left;

}

#footer{
	height:57px;
	background:#3F0;
	float:right;
	width:966px;
	background:#69C;
	clear:both;
}

Espero que me podais ayudar con el problema, y perdonad que haya puesto tanto, pero lo hago para facilitar la respuesta.
Gracias de antemano

sander · #2 (**permalink**) 01/12/2009, 10:25

Hola prueba con agregar esto:

Código css:

Ver original#contenedor
{
    overflow: auto;
    width:938px;
    background:#CCC;
    clear:both;
    border-left:#F0F;
    border-left-style:solid;
    border-left:14px;
    border-right:#F0F;
    border-right-style:solid;
    border-right:14px;
}

Tambien tienes que hacer un corte despues de tu div derecha para que se ordenen correctamente para eso necesitas usar un div sin contenido con la propiedad clear:both asi:

Código html:

Ver original<body>
<div id="web">
<div id="cabecera" style="clear:both"><img src="http://www.forosdelweb.com/f53/imagenes/cabecera.jpg"/></div>
<div id="contenedor">
<div id="izquierda">IZQUIERDA</div>
<div id="centro">CENTRO</div>
<div id="derecha">DERECHA</div>
<div id="neutral"></div>
</div>
<div id="footer">
<div id="f1"><img src="http://www.forosdelweb.com/f53/imagenes/fot-izq.jpg" width="35" height="57" /></div>
<div id="f2" align="center"></div>
<div id="f3"><img src="http://www.forosdelweb.com/f53/imagenes/fot-dch.jpg" width="35" height="57" /></div>
</div>
</div>
</body>

En el tu css aumentas esto:

Código css:

Ver original#neutral
{
      clear: both;
}

Con eso deberia solucionarse tu problema.

Saludos.

Sr_Furia · #3 (**permalink**) 01/12/2009, 11:12

Mmm Sander, gracias por la ayuda, pero probe eso y no me funcionó.

Los bordes solo se ven cuando le doy una altura fija a la DIV CENTRO. Pero claro, no me interesa darle altura fija, sino que sea expandible.

A ver si alguien puede exarme un cable, q llevo varios dias tirandome de los pelos con esto jajaja.

Saludos y gracias de nuevo Sander.

sander · #4 (**permalink**) 01/12/2009, 14:34

Por que no pruebas ponerlo asi:

Código css:

Ver original#contenedor
{
    overflow: auto;
    width:938px;
    background:#FFF;
    clear:both;
    border-left: 14px solid #F0F;
    border-right: 14px solid #F0F;
}

Tambien cambiale el fondo a color blanco para ver si el div contenedor esta tomando el tamaño o no.

Saludos.

Sr_Furia · #5 (**permalink**) 01/12/2009, 18:03

Gracias, Sander, ya lo he solucionado

bkolores · #6 (**permalink**) 01/12/2009, 19:35

yo creo la clase "clear:both" y la agrego a un <br class="clear" /> entonces así se me soluciona.

pero que bueno que lo hayas solucionado