Foros del Web » Creando para Internet » CSS »

Cuatro divs alineados

Estas en el tema de Cuatro divs alineados en el foro de CSS en Foros del Web. Hola, mi consulta es la siguiente: Dentro de un div, quiero tener cuatro divs que se dispongan de la siguiente manera: 1 2 3 4 ...
  #1 (permalink)  
Antiguo 13/06/2011, 06:53
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 6 años, 1 mes
Puntos: 13
Pregunta Cuatro divs alineados

Hola, mi consulta es la siguiente:
Dentro de un div, quiero tener cuatro divs que se dispongan de la siguiente manera:
1 2
3 4
Y que se mantengan siempre asi, sin importar el contendio que lleven dentro, ademas quiero que la altura de cada uno de ellos tambien se adapte a su contenido, es decir no tener que estar asignandole una altura fija segun lo que lleven dentro que va a ser texto.

Me pasa que cuando vario el contenido del contenedor1, el contenedor de abajo, es decir el 3 se corre hacia la derecha y no queda como yo quiero.

Aqui les va el codigo:

CSS

Código:
/*Contenedor de los cuatro divs*/

#page {
	width: 980px;
	text-align: justify;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 45px;
	margin-left: auto;
	position:relative;
	}

#contenedor1 {
	float: left;
	width:457px;
	text-align: center;
	margin-top: 10px;
		
	}
	
#contenedor2{
	float: right;
	width:457px;
	margin-top: 10px;
		
	}
	
#contenedor3{
	float:left;
	width:457px;
	margin-top: 20px;
	margin-bottom:45px;
	margin-right:66px;
	}
		
#contenedor4{
	float:right;
	width:457px;
	margin-top: 20px;
	}
HTML

Código HTML:
<div id="page">

      <div id="contenedor1"> 

      </div>
      
       <div id="contenedor2">
    
       </div>
       
       <div id="contenedor3">

       </div>
       
      <div id = "contenedor4">
  
      </div>

</div> 
Muchas gracias!
  #2 (permalink)  
Antiguo 13/06/2011, 07:26
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 4 meses
Puntos: 21
Respuesta: Cuatro divs alineados

Código CSS:
Ver original
  1. #page {
  2.     width: 980px;
  3.     text-align: justify;
  4.     margin-top: 15px;
  5.     margin-right: auto;
  6.     margin-bottom: 45px;
  7.     margin-left: auto;
  8.     position:relative;
  9.     }
  10.  
  11. #contenedor1 {
  12.     float: left;
  13.     width:457px;
  14.     text-align: center;
  15.     margin-top: 10px;
  16.        
  17.     }
  18.    
  19. #contenedor2{
  20.     float: right;
  21.     width:457px;
  22.     margin-top: 10px;
  23.        
  24.     }
  25.    
  26. #contenedor3{
  27.     float:left;
  28.     width:457px;
  29.     margin-top: 20px;
  30.     margin-bottom:45px;
  31.     margin-right:66px;
  32.     }
  33.        
  34. #contenedor4{
  35.     float:right;
  36.     width:457px;
  37.     margin-top: 20px;
  38.     }

PRUEBA ESTO:
Código CSS:
Ver original
  1. #page {
  2.     width: 980px;
  3.         height: 1%;
  4.     text-align: left;
  5.         margin: 15px auto 45px;
  6.     position:relative;
  7.         overflow: hidden;
  8.     }
  9.  
  10. #contenedor1, #contenedor2, #contenedor3, #contenedor4 {
  11. width: 457px;
  12. }
  13.  
  14. #contenedor1, #contenedor3 { float: left; }
  15. #contenedor2, #contenedor4 { float: right; }
  16.  
  17. #contenedor1 {
  18.     text-align: center;
  19. }
  20.  
  21. #contenedor1, #contenedor2 {
  22. margin-top: 10px;
  23. }
  24.  
  25. #contenedor3 {
  26.     margin: 20px 66px 45px 0;
  27. }
  28.  
  29. #contenedor4{
  30.     margin-top: 20px; /* Esto es correcto? */
  31. }

Prueba esto y nos dices.

Saludos.
__________________
_
  #3 (permalink)  
Antiguo 13/06/2011, 07:38
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 6 años, 1 mes
Puntos: 13
Respuesta: Cuatro divs alineados

Hola, no funciono, sigue todo tal cual lo tenia antes, creo que lo que me pasas es una versión resumida de lo que tengo, a no ser por el div page que le das 1% de altura, si lo dejo así no se ve nada, y probé dándole 100 % y quedan todos los contenedores de adentro corridos...
Gracias de todas maneras! :)
  #4 (permalink)  
Antiguo 13/06/2011, 07:47
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 6 años, 1 mes
Puntos: 13
Respuesta: Cuatro divs alineados

Lo que acabo de notar que pasa, no se si influye en algo, pero les comento, si el contenedor 1 y 2 tienen la misma altura, queda todo perfecto, pero si el contenedor 2 tiene altura menor que el 1 en este caso el 3 se pasa para abajo del 2 y 4 debajo del 3, algo así
1...2
.....3
......4

(los puntos obviamente que no)
Gracias!
  #5 (permalink)  
Antiguo 13/06/2011, 08:01
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 4 meses
Puntos: 21
Respuesta: Cuatro divs alineados

Mira tus anchos, márgenes y rellenos.

Lee sobre el modelo de caja (box-model).

Saludos.
__________________
_
  #6 (permalink)  
Antiguo 13/06/2011, 08:21
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 6 años, 1 mes
Puntos: 13
Respuesta: Cuatro divs alineados

Ya he leído sobre ese tema, gracias por tu sugerencia de todos modos.
Saludos.
  #7 (permalink)  
Antiguo 13/06/2011, 11:00
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 3 meses
Puntos: 116
Respuesta: Cuatro divs alineados

yo creo que lo que debes usar es el div contenedor, y dentro de ese div, DOS divs, subcontenedores, y dentro de cada uno, los otros divs.


<div CONTENEDOR>
<div subcontenedor><div 1></div><div 2></div></div>
<div suncontenedor><div 3></div><div 4></div></div>
</div>

Y uses el metodo de columas equilibradas para (1 Y 2) y (3 Y 4)
Saludos.
__________________
Programador jQuery & PHP
  #8 (permalink)  
Antiguo 13/06/2011, 11:42
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 6 años, 1 mes
Puntos: 13
Respuesta: Cuatro divs alineados

Voy a probar con eso y te cuento, gracias por la idea! Saludos.
  #9 (permalink)  
Antiguo 13/06/2011, 16:52
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 8 meses
Puntos: 18
Respuesta: Cuatro divs alineados

Si no trabajas bien los floats añadir dos contenedores mas no te va a servir de nada.

El problema que estas tienendo es por la falta de un clear. Típicamente lo que se hace es agregar un div vacio (el que por defecto ocupara toda la línea) con la propiedad clear:both; En tu caso sería entremedio de los contendores dos y tres.

en el html seria:

Código:
<div id="page">

      <div id="contenedor1"> 

      </div>
      
       <div id="contenedor2">
    
       </div>
	   
	<div class="clear"></div>
       
       <div id="contenedor3">

       </div>
       
      <div id = "contenedor4">
  
      </div>

</div>
y a tu css original le agregas:

Código:
.clear{
	clear:both;
}
__________________
http://www.ignacionieva.com.ar
  #10 (permalink)  
Antiguo 13/06/2011, 20:11
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 6 años, 1 mes
Puntos: 13
Respuesta: Cuatro divs alineados

Tal cual @inieva ese era el problema. Muchas gracias!!

Etiquetas: cuatro, divs
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 20:36.