Cuatro divs alineados

[rapuig]

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!

[opzina]

Código CSS:

#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;
    }
 

PRUEBA ESTO:

Código CSS:

#page {
    width: 980px;
        height: 1%;
    text-align: left;
        margin: 15px auto 45px;
    position:relative;
        overflow: hidden;
    }
 
#contenedor1, #contenedor2, #contenedor3, #contenedor4 {
width: 457px;
}
 
#contenedor1, #contenedor3 { float: left; }
#contenedor2, #contenedor4 { float: right; }
 
#contenedor1 {
    text-align: center;
}
 
#contenedor1, #contenedor2 { 
margin-top: 10px;
}
 
#contenedor3 {
    margin: 20px 66px 45px 0;
}
 
#contenedor4{
    margin-top: 20px; /* Esto es correcto? */
}
 

Prueba esto y nos dices.

Saludos.

[rapuig]

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! :)

[rapuig]

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!

[opzina]

Mira tus anchos, márgenes y rellenos.

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

Saludos.

[rapuig]

Ya he leído sobre ese tema, gracias por tu sugerencia de todos modos.
Saludos.

[ZoroRoronoa]

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.

[rapuig]

Voy a probar con eso y te cuento, gracias por la idea! Saludos.

[inieva]

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;
}

[rapuig]

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