Foros del Web » Creando para Internet » CSS »

No he podido posicionar correctamente mis divs.

Estas en el tema de No he podido posicionar correctamente mis divs. en el foro de CSS en Foros del Web. Hola amigos verán les muestro una captura de pantalla de lo que quiero hacer ver imagen en tamaño completo estilo css @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: ...
  #1 (permalink)  
Antiguo 16/06/2010, 23:51
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
No he podido posicionar correctamente mis divs.

Hola amigos verán les muestro una captura de pantalla de lo que quiero hacer


ver imagen en tamaño completo

estilo css
Código CSS:
Ver original
  1. body {
  2.     background:url(themes/default/images/bg.png);
  3.     background-repeat:repeat-x;
  4.     background-color:#DDD;
  5. }
  6. #header {
  7.     width:100%;
  8.     height:150px;
  9.     color:#fff;
  10. }
  11. #content {
  12.     width:80%;
  13.     margin: 30px auto;
  14.     margin-bottom:2.5em;
  15. }
  16. #footer{
  17.     background: url(themes/default/images/footer-bg.png);
  18.     background-repeat:repeat-x;
  19.     margin-top:15px;
  20. }


Lo que deseo lograr es que el pie de página no se me convine con los estilos del content, del cuerpo de la págiona.

Pero cuando agrego divs flotantes.
como estos:

Código CSS:
Ver original
  1. #content div.left {
  2.     float:left;
  3.     width:450px;
  4.    
  5. }
  6. #content div.right {
  7.     float:right;
  8.     width:600px;
  9.     margin-left:1.5em;
  10. }

Todo se descompone y me queda así:


Ver imagen en tamaño completo

estilo 2 css:
Código CSS:
Ver original
  1. body {
  2.     background:url(themes/default/images/bg.png);
  3.     background-repeat:repeat-x;
  4.     background-color:#DDD;
  5. }
  6. #header {
  7.     width:100%;
  8.     height:150px;
  9.     color:#fff;
  10. }
  11. #content {
  12.     width:80%;
  13.     margin: 30px auto;
  14.     margin-bottom:2.5em;
  15. }
  16. #content div.left {
  17.     float:left;
  18.     width:450px;
  19.    
  20. }
  21. #content div.right {
  22.     float:right;
  23.     width:600px;
  24.     margin-left:1.5em;
  25. }
  26. #footer{
  27.     background: url(themes/default/images/footer-bg.png);
  28.     background-repeat:repeat-x;
  29.     margin-top:15px;
  30. }

document html 2:
Código HTML:
Ver original
  1. <div id="header">
  2. Cabecera de la pagina
  3. </div>
  4.  
  5. <div id="content">
  6.    
  7.    <div class="left">
  8.      Bloque a la izquierda
  9.    </div>
  10.    
  11.    <div class="right">
  12.      Bloque a la derecha
  13.    </div>
  14.  
  15. </div>
  16.  
  17. <div id="footer">
  18. Este es el pie de página.
  19. </div>

Es así de sencillo. ¿Por qué no me sale?

muchas gracias.
Saludos.
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.
  #2 (permalink)  
Antiguo 17/06/2010, 01:03
 
Fecha de Ingreso: junio-2010
Mensajes: 92
Antigüedad: 7 años, 5 meses
Puntos: 1
Respuesta: No he podido posicionar correctamente mis divs.

No es que se te descomponga, lo que pasa es que necesitas ponerle MIN-HEIGHT a tu div contenedor, digamos, ponle, no se 100 px y has la prueba.

Cuando pones un div a flotar, lo estas liberando de su elemento padre, y a su ves, liberas al elemento padre de ese div. Si ese elemento padre obtiene su tamaño vertical del contenido de sus elementos hijos, cuando los pones a "flotar", el elemento padre entiende que no tiene algo que defina su altura, mas que su margin de 60 px en este caso (30 arriba, 30 abajo).

Espero haberme explicado.
  #3 (permalink)  
Antiguo 17/06/2010, 08:20
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
Respuesta: No he podido posicionar correctamente mis divs.

Tu explicacion esta perfecta. te lo agradesco mucho amigo.

Me ha funcionado bien. Muchas gracias ;)

Saludos
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.
  #4 (permalink)  
Antiguo 17/06/2010, 14:26
 
Fecha de Ingreso: junio-2010
Mensajes: 92
Antigüedad: 7 años, 5 meses
Puntos: 1
Respuesta: No he podido posicionar correctamente mis divs.

Para servirte amigo ;)
  #5 (permalink)  
Antiguo 17/06/2010, 16:51
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: No he podido posicionar correctamente mis divs.

bueno la mejor manera de limpiar floats es con overflow:hidden ami gusto y segun...
http://www.librosweb.es/css_avanzado...ar_floats.html
  #6 (permalink)  
Antiguo 18/06/2010, 22:10
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
Respuesta: No he podido posicionar correctamente mis divs.

alexk, has solucionado al 100% la duda que me ha surgido desde siempre.

Te lo agradezco mucho amigo.

Saludos.
P.D: Te dejo Karma por tu genial respuesta ;)
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.

Etiquetas: correctamente, posicionar
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 14:50.