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