Problema alineando bloques verticalmente

Reihzard · #1 (**permalink**) 04/07/2012, 04:32

Hola, hace muchísimo tiempo que no toco CSS y HTML, y lo poco que sabía se me ha olvidado por completo, así que allá va mi duda...

Tengo un html, el cual tiene un contenedor principal; ese contenedor contiene otros 3 bloques (cabecera, menú, y pie de página).

Bueno, dejo una imagen para poder explicarlo un poco mejor:

Lo que busco es que el bloque rojo, quede centrado verticalmente dentro del morado. En teoría debería funcionar con un valor en margin-top, pero no se desplaza de ninguna forma ponga el valor que ponga.
Lo curioso, es que si le añado margin-top con algún valor a los 3 bloques que contiene (los verdes), o al bloque morado (que es el que contiene el bloque rojo), sí se desplazan correctamente y sin problema.

¿Alguna solución para esto?
Un saludo, y gracias de antemano.

Dejo el código html:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="TEST_CAJAS_CSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="caja1">
</div>
<div id="caja2">
<div id="cajamenu">
<div id="menu1">
</div>
<div id="menu2">
</div>
<div id="menu3">
</div>
</div>
<div id="caja3">
</div>
</div>
</body>
</html>

Y el CSS:

Código:

@charset "utf-8";
/* CSS Document */


#contenedor
{
	width:1000px;
	height:1000px;
	background-color:#996
}

#caja1
{
	width:900px;
	height:250px;
	background-color:#906;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
}

#caja2
{
	width:900px;
	height:250px;
	background-color:#405;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
}

#caja3
{
	width:900px;
	height:250px;
	background-color:#069;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
}

#cajamenu
{
	width:800px;
	height:100px;
	background-color:#C00;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
}
	
#menu1
{
	width:200px;
	height:80px;
	background-color:#090;
	margin-left:100px;
	margin-right:auto;
	margin-top:10px;
	float:left;
}

#menu2
{
	width:200px;
	height:80px;
	background-color:#060;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	float:left;
}

#menu3
{
	width:200px;
	height:80px;
	background-color:#030;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	float:left;
}

mechaz · #2 (**permalink**) 04/07/2012, 20:12

Los floats, son los que no te permiten aplicar un margin-top, quita esos floats, y utiliza "display:inline-block;" y "vertical-align:top;", y te funcionara prácticamente "igual", ademas podras aplicar el margin que desees.

Borras los floats y agregas esto:

Código:

 
#menu1, #menu2, #menu3 {
	display:inline-block;
	vertical-align:top;	
}

Y para agregarle un margen, con este código lo logras:

Código:

#caja2
{
	width:900px;
	height:250px;
	background-color:#405;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	padding-top:20px;
}

Espero que te funcione, ya que a mi me funciona.

Reihzard · #3 (**permalink**) 05/07/2012, 04:36

Muchísimas gracias por tu respuesta, Mechaz, está bien saber esa forma.

La cosa es que no entendía por qué no podía darle a la caja "roja" un margin-top, pero trasteando un poco he descubierto que con position:absolute; sí me deja "moverla". Aunque no se qué tal organizado estará el código resultante.... jeje

Un saludo!