poner varios div a la izquierda o derecha

poropopo · #1 (**permalink**) 08/04/2008, 01:22

Hola,

estoy empezando y tengo una página que va bien :header, menú izquierda,contenido principal,otro div a la derecha y el pie.Pero el problema es que quiero agregarle otro div a la izquierda que quede debajo del´primero pero no encuentro la manera. Si me decis algo os lo agradezco.

Saludos

PedroRodas · #2 (**permalink**) 08/04/2008, 03:18

Quieres un div que quede debajo del div menu? es eso?

Código HTML:

<!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="ContentType" content="text/html; charset=iso-8859-1" />
<title>WEB CSS 2 COLUMNAS CON CABECERA Y PIE</title>
<style type="text/css">
#contenedor{
width:760px;
height:700px;
margin: 0px auto;
}
#cabecera{
width:760px;
height:100px;
background-color:#3c6;
text-align:center;
vertical-align:middle;
}
#menu{
float:left;
width:180px;
height:500px;
background-color:#ff0;
}
#menu1{
width:180px;
height:250px;
background-color:#9c9;
}
#menu2{
width:180px;
height:250px;
background-color:#6c6;
}
#principal{
float:left;
width:580px;
height:500px;
background-color:#363;
}
#pie{
clear:both;
width:760px;
height:100px;
background-color:#3c6;
}
div#pie img{
vertical-align:middle;/* Utlilizo una img de referencia y un vertical-align:middle para centrar (en vertical)el texto en el div. En el ej37 uso un line-height */
}
</style>
</head>
<body>
<div id="contenedor">
	<div id="cabecera">cabecera
	</div>
	<div id="menu">	
		<div id="menu1">menu1
		</div>
		<div id="menu2">menu2
		</div>
	</div>			
	<div id="principal">contenido
	</div>
	<div id="pie">pie</div>
</div>
</body>
</html>

No se si es lo que quieres, pero ahi tienes un ejemplo

poropopo · #3 (**permalink**) 08/04/2008, 11:11

Exacto.Voy aprobarlo a ver si soy capaz de meterlo en el diseño que tengo .
Muchas gracias, Pedro.

ASYNTETYCO · #4 (**permalink**) 02/05/2008, 08:17

Cita:

Iniciado por PedroRodas

Quieres un div que quede debajo del div menu? es eso?

Código HTML:

<!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="ContentType" content="text/html; charset=iso-8859-1" />
<title>WEB CSS 2 COLUMNAS CON CABECERA Y PIE</title>
<style type="text/css">
#contenedor{
width:760px;
height:700px;
margin: 0px auto;
}
#cabecera{
width:760px;
height:100px;
background-color:#3c6;
text-align:center;
vertical-align:middle;
}
#menu{
float:left;
width:180px;
height:500px;
background-color:#ff0;
}
#menu1{
width:180px;
height:250px;
background-color:#9c9;
}
#menu2{
width:180px;
height:250px;
background-color:#6c6;
}
#principal{
float:left;
width:580px;
height:500px;
background-color:#363;
}
#pie{
clear:both;
width:760px;
height:100px;
background-color:#3c6;
}
div#pie img{
vertical-align:middle;/* Utlilizo una img de referencia y un vertical-align:middle para centrar (en vertical)el texto en el div. En el ej37 uso un line-height */
}
</style>
</head>
<body>
<div id="contenedor">
	<div id="cabecera">cabecera
	</div>
	<div id="menu">	
		<div id="menu1">menu1
		</div>
		<div id="menu2">menu2
		</div>
	</div>			
	<div id="principal">contenido
	</div>
	<div id="pie">pie</div>
</div>
</body>
</html>

No se si es lo que quieres, pero ahi tienes un ejemplo

Veo que pusiste un atributo clear al pie. ¿Para que sirve? Que es lo que hace?