Hola, espero podáis ayudarme con un problema que estoy teniendo con mi web en proceso. Voy por la lección dos y bueno, de momento todo bien excepto que la capa "pie" me sale a la derecha del contenido, es decir, que me aparece el menu a la izquierda, el contenido en medio y el pie, que debería estar debajo, sale a la derecha. No veo dónde puede estar mi error, a ver si podéis echarme una mano. Os dejo el html y la hoja de estilo. Muchas gracias.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="gobal">
<div id="cabecera">Bienvenidos a mi web</div>
<div id="navegacion">Barra de navegación</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>Esta será la zona principal de la web</div>
<div id="pie">Este será el pie de página</div>
</div>
</body>
</html>
HOJA DE ESTILO:
*{margin:0px; padding:0px; border:0px;}
#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;}
body{text-align:center;}
#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{}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="gobal">
<div id="cabecera">Bienvenidos a mi web</div>
<div id="navegacion">Barra de navegación</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>Esta será la zona principal de la web</div>
<div id="pie">Este será el pie de página</div>
</div>
</body>
</html>
HOJA DE ESTILO:
*{margin:0px; padding:0px; border:0px;}
#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;}
body{text-align:center;}
#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{}