mi pie de pagina está muy mal ubicado...

hola de nuevo, resulta q mi pie de página no está al final de la web, sino que aparece en una columna siguiente a la zona principal de la web... mejor véanlo....

mi hoja de estilo es ésta
body {text-align: text:align:left}
#cabecera {background-color: pink }
#navegacion {background-color: gray }
#menu {background-color: yellow; width: 150px ; float:left}
#contenido {background-color: orange ; width: 800px ; float:left}
#menu li {list-style:none ; margin: 4px 0px 4px 6px}
#contenido {background-color: orange }
#pie {background-color: brown }
a {color: brown ; text-decoration:none ; display: block }
a:link { }
a:visited { }
a:hover {color:red ; text-decoration:underline ; background-color: silver }
a:active { }
#global {width:800px ; margin: 4px auto }


y mi plantilla es ésta...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>

<div id="cabecera">Bienvenido a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="menu">Menú
<ul>
  • Real Madrid
  • Facebook
  • Youtube
    </div>

    <div id="contenido">Esta será la zona principal de la web</div>
    <div id="pie">Este es el pié de página</div>
    </body>
    </html>

    Agradezcería de nuevo si inportante ayuda... y gracias por las anteriores ayudas.... definitivamente se merecen un 10....Gracias!!!

    Hoolligan...
  • body {text-align: text:align:left}
    #cabecera {background-color: pink }
    #navegacion {background-color: gray }
    #menu {background-color: yellow; width: 150px ; float:left}
    #contenido {background-color: orange ; width: 800px ; float:left}
    #menu li {list-style:none ; margin: 4px 0px 4px 6px}
    #contenido {background-color: orange }
    #pie {background-color: brown }
    a {color: brown ; text-decoration:none ; display: block }
    a:link { }
    a:visited { }
    a:hover {color:red ; text-decoration:underline ; background-color: silver }
    a:active { }
    #global {width:800px ; margin: 4px auto }

    Con cuál te quedas? Je, ahí esta el problema.
    quedate con el q tiene float :P

    bueno aparte de eso si te fijas le diste a contenido una anchura(width)de 800px te olvidaste restarle lo q ocupa el menu :P y puedo ver q te saltaste la leccion en la q se pone todos los estilos a 0 :roll: dale una pasada mas a las lecciones asi entenderas :P
    volvi a revisar la leccion :P ya vi el error aparte de q tienes 2 contenidos :P

    bueno e aqui el error :P:

    <div id="menu">Menú
    <ul>
  • Real Madrid
  • Facebook
  • Youtube
    </div>

    <div id="contenido">Esta será la zona principal de la web</div>

    lo q esta en rojo es el error :P si te fijas separaste el menu de contenido cuando deberia ir dentro de contenido
    <div id="contenido">
    <div id="menu">Menú
    <ul>
  • Real Madrid
  • Facebook
  • Youtube
    </div>

    Esta será la zona principal de la web
    </div>

    y recuerda seguir las lecciones :P tal cual asi aprenderas y cuando termines ya te lanzas a hacer una pagina diferente :P