Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de ¿Como hago para extender un dos divs según mis necesidades? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/05/2011, 11:20
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 6 años, 7 meses
Puntos: 0
¿Como hago para extender un dos divs según mis necesidades?

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.

  #2 (permalink)  
Antiguo 01/05/2011, 11:49
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 6 años, 7 meses
Puntos: 344
Respuesta: ¿Como hago para extender un dos divs según mis necesidades?

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <style type="text/css">
  4. #contenedor {
  5.   border:   thick solid #000;
  6.   overflow: hidden;
  7.   height:   1%;
  8.   background: red;
  9. }
  10.  
  11. #izquierda {
  12.   float: left;
  13.   width: 40%;
  14.   height: 500px;
  15.   background: green;
  16. }
  17.  
  18. #derecha {
  19.   float: right;
  20.   width: 40%;
  21.   height: 500px;
  22.   background: yellow;
  23.   }
  24. </head>
  25. <div id="contenedor">
  26. <div id="izquierda">
  27. </div>
  28. <div id="derecha">
  29. </div>
  30. </div>
  31. </body>
  32. </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.

Etiquetas: divs, extender
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:15.