Leccion 2 (Menu y contenido)

HOLA[:D],

Lo que me pasa es que segun el tutorial el menu y la barra de contenido tienen que aparecer en la misma linea de esta manera:

http://www.comocreartuweb.com/objetos/plantilla-10.htm

pero ami el menu me sale encima del contenido, de esta forma:



Nose porque sera, yo creo que el los codigos del .html y del .css estan bien mirar:

HTML:

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

<html>
<head>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<title>Page title</title>
</head>
<body>
<div id="global">
<div id="cabecera"> Bienvenidos a mi web </div>
<div id="navegacion">Barra de Navegación</div>
<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="contenido">Esta será la zona principal de la web</div>
<div id="pie">Este es el pié de página</div>
</div>
</body>
</html>



HOJA DE ESTILO:


* {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}
#pie {background-color:brown;}
#global {width:800px; margin:4px auto;}
#menu{background-color:yellow; width:150px;float:left;text-align:left;}
#menu li{list-style:none;margin:4px 0px 4px 6px}
a{color:brown;text-decoration:none;display:block;}
a:link{}
a:visited{}
a:hover{color:red;text-decoration:underline;background-color:silver;}
a:active{}
tu html tiene un error

debe estar asi


<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>

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

ya que menu, debe estar dentro de contenido

yyyy, necesitas agregarle mas texto a contenido, de lo cotrario lo veràs raro
saludos