¿Como hago para extender un dos divs según mis necesidades?

gmzatos · #1 (**permalink**) 01/05/2011, 10:20

Bueno, lo que sucede es que estoy haciendo un website y en el ocupo poner las ultimas noticias del sitio, entonces para ello ocupo poner un div de fondo que seria el body y otro div donde pondría las noticias osea un tipo de contenedor o caja, le aplique algunos efectos como border radius etc etc, espero que me ayuden acá les dejo una imagen para que me entiendan más.

alexg88 · #2 (**permalink**) 01/05/2011, 10:49

Sería mejor si hubieses puesto el código para ver como lo has echo incluido el documento con las reglas CSS.

Estoy casi seguro que el problema es que has puesto el div de las noticias como flotante ( float:left o float:right) y por eso el div se sale del cuerpo.

Para impedir esto hay varios métodos, pero el mejor es:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<style type="text/css">
#contenedor {
  border:   thick solid #000;
  overflow: hidden;
  height:   1%;
  background: red;
}
 
#izquierda {
  float: left;
  width: 40%;
  height: 500px;
  background: green;
}
 
#derecha {
  float: right;
  width: 40%;
  height: 500px;
  background: yellow;
  }
</style>
</head>
<body>
<div id="contenedor">
<div id="izquierda">
</div>
<div id="derecha">
</div>
</div>
</body>
</html>

El div con id="contenedor" sería tu body, y el div con id="derecha" sería tu div de noticias. Para que el body sepa que contiene elementos dentro tienes que indicarselo mediante overflow:hidden o overflow:auto.

Además en IE 6, no funciona esto, por lo que se utiliza la propiedad height:1% para indicarle eso mismo.