Problema con la segunda lección, Estilo para listas.

Agradeceria al que me pueda solucionar el siguiente problema,

En el momento en el que se intenta reparar el fallo del menú (cuando al poner varios enlaces se sale por debajo de la pagina web), al incorporar el width:800px ; float:left, el pie de página sube quedando alineado con el contenido.


La plantilla va así:

<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 Navegación </div>
<div id="contenido">
<div id="menu">
<ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3

    </div>
    Este es el contenido de la página
    </div>

    <div id="pie"> Este es el pie de página </div>

    </div>
    </body>
    </html>


    y la hoja de estilo general así:


    *{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: green ; width: 800px; float:left}
    #menu {background-color: orange ; width: 150px ; float:left ; text-align: left}
    #menu li {list-style:none ; margin: 4px 0px 4px 6px}
    #pie {background-color: yellow}


    Cabe aclarar, que hay funciones agregadas posteriores al problema, es que segui un poco haber si se introducia algo que lo arreglará.

    Desde ya Muchisimas gracias
  • Lechuga
    Pos no entiendo muy bien el problema pero supongo que será por falta de contenido en "contenido", jeje.

    Prueba a ponerle unos cuantos
    a la capa contenido, son saltos de párrafo que rellenan la página sin necesidad de escribir nada.

    A ver si ese pie baja y te queda mejor.

    Un saludo.