Entrar

Como alinear verticalmente dos divs con html y css

Joaco_LP · · Solicitar retirada
Hola a todos, ire directo al grano, el tema es que quiero crear varios menus laterales del lado derecho, pero al intentar alinearlos verticalmente me quedan asi:



Este es el codigo html que utilize
<html>
<head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
  </head>
  <body>
    <div id="global">
		<div id="cabecera">Bienvenidos a mi Web</div>
		<div id="navegacion">Barra de Navegacion</div>
		<div id="contenido">
		  <div id="menu">
		  <ul>
		  <li><a href="#">Enlace 1</a></li>
		  <li><a href="#">Enlace 2</a></li>
		  <li><a href="#">Enlace 3</a></li>
		  </ul>
		  </div>
	    <div id="menu1">
		  <ul>
		  <li><a href="#">Enlace 1</a></li>
		  <li><a href="#">Enlace 2</a></li>
		  <li><a href="#">Enlace 3</a></li>
		  </ul>
		  </div>
		  <div id="menu2">
		  <ul>
		  <li><a href="#">Enlace 1</a></li>
		  <li><a href="#">Enlace 2</a></li>
		  <li><a href="#">Enlace 3</a></li>
		  </ul>
		  </div>
		</div>
		<div id="pie">Este es el pie de pagina</div>
  </body>
</html>

Y esta la Css
*{margin:0px; padding:0px; border:0px;}
body {text-align: center;}
#cabecera {background-color: pink;}
#navegacion {background-color: gray;} 
#contenido {background-color:orange; width:800px; float:left; margin: 0px 650px 0px 0px;}
#menu {background-color:purple; width:150px; float:left; text-align: left; margin:3px 10px 3px 3px}
#menu1 {background-color:yellow; 
width:150px; float:right; text-align: center; margin:3px 10px 3px 3px}
#menu2 {background-color:red; width:150px; float: right;
text-align: justify; margin:95px 3px 3px 3px;}
#menu li {list-style: none; margin:4px 0px 4px 6px;}
#menu1 li {list-style: none; margin:4px 0px 4px 6px;}
#menu2 li {list-style: none; margin:4px 0px 4px 6px;}
#pie {background-color: brown;}
#global {width: 800px; margin: 4px auto;}


Alguna idea de como solucionarlo? Si es asi agradeceria mucho que me la dieran!
Muchas gracias por el espacion...
manmanu · · Solicitar retirada
Hola joaco...
Antes de ver el código que pusiste...
Mira si te sirve esto;

<div style="clear:both;"></div>

Entre div y div de tus menús, esto puede aliviarlo.
Lo que hace esto es simplemente un salto de divs...

saludos
Raul Nevarez Garcia · · Solicitar retirada
Haber, si entendi bien tu problema, lo que quieres hacer es que quede un menu del lado izquierdo y los otros dos(menu1 y menu2) del lado derecho del contenido, arriba el menu1 y abajo en seguida el menu2. Si es asi solo necesitas crear una capa o div que contenga a los menus que quieres que aparescan del lado derecho(el menu1 y menu2), a este div le podemos poner de nombre "menus-derecha". asi seria el codigo html:

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegacion</div>
<div id="contenido">
<div id="menu">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</div>

<div id="menus-derecha">
<div id="menu1">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</div>
<div id="menu2">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</div>
</div>
</div>
<div id="pie">Este es el pie de pagina</div>
</div>
</body>
</html>


y este es el codigo css:

*{margin:0px; padding:0px; border:0px;}
body {text-align: center;}
#cabecera {background-color: pink;}
#navegacion {background-color: gray;}
#contenido {background-color:orange; width:800px; float:left; margin: 0px 650px 0px 0px;}
#menus-derecha {width:150px;float:right}
#menu {background-color:purple; width:150px; float:left; text-align: left; margin:3px 10px 3px 3px}
#menu1 {background-color:yellow; width:150px; float:right; text-align: center; margin:3px 10px 3px 3px}
#menu2 {background-color:red; width:150px; float:right; text-align: justify; margin:3px 3px 3px 3px;}
#menu li {list-style: none; margin:4px 0px 4px 6px;}
#menu1 li {list-style: none; margin:4px 0px 4px 6px;}
#menu2 li {list-style: none; margin:4px 0px 4px 6px;}
#pie {background-color: brown;}
#global {width: 800px; margin: 4px auto;}

Espero haber solucionado tu problema.
Jenkins · · Solicitar retirada
Bueno varias respuestas son mejor que una y ademas esta es diferente a la de los anteriores, espero te sirva también [:D]

EL código html quedaría así:

<html>
<head>
<title>Jenkins</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<!-- Inicio Global -->
<div id="global">
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegacion</div>
<!-- Inicio Contenido -->
<div id="contenido">
<!-- Inicio codigos menus -->
<div id="menus">
<div class="menu1">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</div>
<div class="menu2">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</div>
<div class="menu3">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</div>
<!-- Cierre codigo menu -->
</div>
<!-- Cierre Contenido -->
</div>
<div id="pie">Este es el pie de pagina</div>
<!-- Cierre Global -->
</div>
</body>
</html>

Te hacia falta el cierre de global y ademas cree una capa llamada menus y varias sub capas llamadas menu1-2-3.
Simplifique tu codigo CSS y cambie la capa global porque la tenias de ultima, debes acomodarla en el mismo orden que realizaste el codigo html debido a que los navegadores terminaran leyendola de ultima.

Codigo CSS:

*{margin:0px; padding:0px; border:0px;}
body {text-align: center;}
#global {width: 800px; margin: 4px auto;}
#cabecera {background-color: pink;}
#navegacion {background-color: gray;}
#contenido {background-color:orange; width:800px; float:left; margin: 0px 650px 0px 0px;}
#menus {width: 150px; float: left;}
#menus .menu1 {background-color:purple; text-align: left; margin:3px 10px 3px 3px}
#menus .menu2 {background-color:yellow; text-align: center; margin:3px 10px 3px 3px}
#menus .menu3 {background-color:red; text-align: justify; margin:95px 3px 3px 3px;}
#menus li {list-style: none; margin:4px 0px 4px 6px;}
#pie {background-color: brown;}

El menu3 sale bastante mas distanciado debido a que incluiste margin:95px, modificalo si no te gusta de esa manera.

Cuando terminas se vera asi: