Foros del Web » Creando para Internet » CSS »

Problema alineando bloques verticalmente

Estas en el tema de Problema alineando bloques verticalmente en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/07/2012, 04:32
 
Fecha de Ingreso: julio-2006
Mensajes: 18
Antigüedad: 17 años, 8 meses
Puntos: 0
Pregunta Problema alineando bloques verticalmente

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;
}
  #2 (permalink)  
Antiguo 04/07/2012, 20:12
 
Fecha de Ingreso: diciembre-2011
Ubicación: Medellín
Mensajes: 68
Antigüedad: 12 años, 3 meses
Puntos: 7
Respuesta: Problema alineando bloques verticalmente

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.

Última edición por mechaz; 04/07/2012 a las 20:17
  #3 (permalink)  
Antiguo 05/07/2012, 04:36
 
Fecha de Ingreso: julio-2006
Mensajes: 18
Antigüedad: 17 años, 8 meses
Puntos: 0
Respuesta: Problema alineando bloques verticalmente

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!

Etiquetas: bloques, html, verticalmente
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 19:40.