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 espacio...
Davidid · · Solicitar retirada
No entiendo qué es lo que buscas ¿quieres que el menú de fondo rojo salga debajo del de fondo amarillo? ¿O que salga entre los dos?

Creo que quieres lo primero ¿no? Te recomiendo una cosa: Es más fácil controlar un elemento flotante que varios. Es decir, mi sugerencia es que metas los 2 menús en una capa y que sea esta la que tenga float:right y todas las características. Además, si te das cuenta estás definiendo 3 menús que van a ser básicamente iguales, por lo que podrías usar clases CSS (en lugar de id's), que son reusables.
Yaneth · · Solicitar retirada
si me permites uns sugerencia....
tu css está desordenado, y eso te causará problemas futuros innecesarios

el css lee de arriba hacia abajo, y de izquierda a derecha

si tu tienes en la linea uno (por ejemplo)
body {color: black}
y en la linea 2 tienes
body {color:white}

de que color crees que será el texto de tu web???? blanco, ya que leyó la primera linea, y te lo puso negro, pero luego lee la segunda y te lo cambia a blanco....
me explico?????

tal como aparecen las ordenes en el html, deben aparecer en el css
*
body
global
cabecera
logotipo
publicidad
navegacion
etc etc etc

y la solución que te comenta Davidid, es la más acertada
crea un div el cual alinearas a la derecha
y dentro de el, insertas los divs que necestias para los diferentes menu, asi todo te queda ordenado y sin problemas

saludos