La capa "pie" me sale a la derecha del contenido

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{}
hola esto esta mal
<!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>

deveria estar asi
<!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="global">
<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>
<p>Esta será la zona principal de la web</p>
</div>
<div id="pie">Este será el pie de página</div>
</div>
</body>
</html>

pusiste <div id="gobal">
y es <div id="global">
pusiste </div>Esta será la zona principal de la web</div>
y es <p>Esta será la zona principal de la web</p>

ademas de un div despues de p
<p>Esta será la zona principal de la web</p>
</div>
Muchas gracias Francisco, por la rapidez y la claridad de tu respuesta! Lo tenía delante y no lo veía...