Dividir div en 4 partes iguales

marodal · #1 (**permalink**) 16/01/2015, 03:20

Hola!

Tengo un div que quiero dividir en 4 partes iguales. Para ello, en primer lugar lo he dividido en dos filas.
Posteriormente, estoy intentando dividir cada fila en dos columnas, pero aqui estoy teniendo problemas. Lo que me ocurre es que la segunda columna de la primera fila me la está dibujando en la segunda columna. Es decir, no consigo alinear las dos coulumnas en la misma fila.

Este es mi codigo:

Código:

<body>
	<div style="margin:0 auto;width:400px;height:400px;border:1px solid #000">
		<div id="contenedor_superior" style="width:100%;height:50%;border-bottom:1px solid #000;">
			<div id="contenedor_arriba_izquierda" style="width:50%;height:100%;border-right:1px solid #000;float:left;"></div>
			<div id="contenedor_arriba_derecha" style="width:50%;height:100%;float:right;"></div> 
		</div>
		<div id="contenedor_inferior" style="width:100%;height:50%;"></div>
	</div>
</body>

¿Alguien me podría ayudar? Lo agradecería mucho

Saludos

alpe2000 · #2 (**permalink**) 16/01/2015, 03:50

El div contenedor_arriba_izquierda mide la mitad del espacio mas un pixel del borde derecho, y el contenedor contenedor_arriba_derecha mide la mitad del espacio, por lo tanto no cabe en el espacio asignado.