Error con la posicion del menu y el pie de pagina

Pequeño error.
Cuando corriges el fallo que produce el menu (descoloca el pie de pagina al ser ams largo que el contenido) como tu indicas (poniendole width: 800px ; float:left) el pie de foto se sube a la linea del contenido si cabe, es decir, si aun queda espacio en esa linea se sube.
Mira aver si puedes hacer algo o si el error es mio, por si acaso te dejo mis codigos y los compruebas.

plntilla.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="general">
		<div id="cabecera">Bienvenidos a mi Web</div>
		<div id="navegacion">Barra de Navegación</div>
		<div id="contenido">
			<div id="menu">
				<ul>
					[*][url="#"]Enlace 1[/url]
					[*][url="#"]Enlace 2[/url]
					[*][url="#"]Enlace 3[/url]
				[/list]
			</div>
		Está sera la zona principal de la web</div>
  	<div id="pie">Este es el pie de página</div>
	</div>
</body>

</html>

estilo-general.css:
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 }
#menu li { list-style:none }
#pie {background-color: brown}
Todavia estoy creandola por eso os puse el codigo.
Ahora he avanzado mas y tengo el codigo asi
plantilla.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="general">
		<div id="cabecera">Bienvenidos a mi Web</div>
		<div id="navegacion">Barra de Navegación</div>
		<div id="contenido">
			<div id="menu">
				<ul>[*][url="#"]Enlace 1[/url][*][url="#"]Enlace 2[/url][*][url="#"]Enlace 3[/url][/list]
			</div>
			

Está sera la zona principal de la web</p>
			

Me dices que escriba mucho y yo no ser que poner, por probar voy a cerrar aqui el parrafo y empezar otro</p>
			

Bueno pues aqui empieza y mas tarde acabara, como desvario eh, pero hay que sobrepasar los tres enlaces y a estas horas ando escaso de imaginacion asi que seguire escribiendo chorradas hasta que me aburra</p>
			

Cuarto parrafo y empiezo a quedarme sin ideas. Esto parece un diario. Despues del ya voy a darle al enter sin cerrar parrafo para ver como queda, ya
			aqui ya esta dado.</p>
		</div>
		<div id="pie">Este es el pie de página</div>
	</div>
</body>

</html>

estilo-general.css:
* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
a {color:brown ; text-decoration:none ; display: block}
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
p {text-align: justify}
#global {width:800px ; margin: 4px auto}
#cabecera {background-color: pink}
#navegacion {background-color: gray}
#contenido {background-color: orange ; width: 800px ; float:left}
#contenido p {padding: 5px 10px 5px 10px}
#menu {background-color: yellow; width: 150px ; float:left ; text-align:left}
#menu li { list-style:none ; margin: 4px 6px 4px 6px}
#pie {background-color: brown}

y el problema que me surge es que el div naranja (contenido) sobresale por la izq., es decir, no respeta los 800px sino que se le suman 800 + los 150px de la barra del menu que tengo puesta dentro de esa capa