El Pie se alinea junto a Zona Principal, no debajo (Lec.2)

Hola amigos, primero enhorabuena por este foro, así como por el curso que se está desarrollando.

Soy nuevo y voy por la Lección Dos, muy animado pues hasta ahora todo me ha salido correcto, con algunas aventuras personales que me están saliendo y soy de lo más torpe con ésto.

Bueno, a la pregunta, voy por Estilo para Listas de la Lección segunda, ya terminada, pero el problema surge que el Pie de página en color granate, me sale en Vista Previa al lado de zona principal de la Web, de color naranja, en vez de debajo de ésta y su menu (amarillo), y por más cambios que hago no se pone debajo, solamente cuando al pie le pongo tambien "width:800px", pero se que da corto. ¿A qué se debe esto?

Este es el código de la Hoja de estilo:

* {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: orange ; width:800px ; float:left}
#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}
a:active {}
#pie {background-color: brown }

Gracias por la contestación de antemano. Saludos.