tengo problemas con el pie

Despues de poner la barra de navegacion con los siete elementos se me alarga el pie.

Que puedo hacer??
Os dejo el codigo que tengo por si acaso:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>souvenirs</title>
<link rel="stylesheet" href="estilos-general.css"type="text/css" media="all">
</head>
<body>
<div id=global>
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif" width="270" height="80" alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi Web</div></div>
<div id="navegacion"><ul><li><a href="index.html">Portada</a></li><li><a href="historia/historia.html">Historia</a></li><li><a href="discografia/discografia.html">Discografía</a></li><li><a href="conciertos/conciertos.html">Conciertos</a></li><li><a href="descargas/descargas.html">Descargas</a></li><li><a href="foro/foro.html">Foro</a></li><li><a href="souvenirs/souvenirs.html">Souvenirs</a></li></ul></div>
<div id="contenido">
<div id="menu"><h1>Titulo de seccion 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>
</div>
<h1>Esta será la zona principal de la web</h1>
<p>Este es mi segundo parrafo. Acabo de poner un punto y en cambio sigue siendo un parrafo pues no le he colocado aun la etiqueta de cierre. Voy a ponersela justo aqui.</p>
<h2>Y este es el tercer parrafo.</h2><p>En pocas lecciones aprender a darle margenes para separarlos unos de otros, e incluso hacerles sangrias por la izquierda a la primera linea, que queda mucho mejor.</p>
<p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Asi esto parece una poesia! je je je.</p>
</div>
</div>
<div id="pie">
<div id="pieuno"><ul><li><a class="enlaceuno" href="#">Foro Ejemplo</a></li><li><a class="enlaceuno" href="#">Contactos</a></li><li><a class="enlaceuno" href="#">Nos Enlazan</a></li></ul></div>
<div id="piedos">pie dos</div>
<div id="pietres"><ul><li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li></ul></div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
hola madisi, podrias poner tambien el codigo del "estilos-general.css" para verlo completo
ok, pues ahi os lo dejo:


* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }

#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 60px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior.gif) }
#pie {border-left:black 1px solid; border-right:black 1px solid;
border-top:black 1px solid; height:65px;}
#pie li {list-style:none; font-size:12px;}
#pieuno {float:left; width:150px;}
#piedos {float:left; width:498px; background-color:silver;}
#pietres {float:left; width:150px;}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
hola madisi, si te entendi bien dijiste que se te alarga el pie osea que el contenedor del pie se pone a la izquierda, si es eso pues eso es porque le estas poniendo todo eso fuera del contenedor general lo que hace que lo tome como particular al pie y haciendolo que coja los atributos desde cero osea si le pones al pie "float:left; width:150px;" esto como es otro contenedor lo va a leer desde la parte izquierda de la ventana mientras que deberia reconocerlo apartir del contenedor naranja osea tomar apartir de ahi el valor de 150px, espero me haya explicado bien xD, buee me tome el atrevimiento de poner el contendor del pie dentro del contenedor general quedando asi:
<h1>Esta será la zona principal de la web</h1>
<p>Este es mi segundo parrafo. Acabo de poner un punto y en cambio sigue siendo un parrafo pues no le he colocado aun la etiqueta de cierre. Voy a ponersela justo aqui.</p>
<h2>Y este es el tercer parrafo.</h2><p>En pocas lecciones aprender a darle margenes para separarlos unos de otros, e incluso hacerles sangrias por la izquierda a la primera linea, que queda mucho mejor.</p>
<p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Asi esto parece una poesia! je je je.</p>
</div>
<!-- de aqui extrai el </div> que habia y lo puse...-->
<div id="pie">
<div id="pieuno"><ul><li><a class="enlaceuno" href="#">Foro Ejemplo</a></li><li><a class="enlaceuno" href="#">Contactos</a></li><li><a class="enlaceuno" href="#">Nos Enlazan</a></li></ul></div>
<div id="piedos">pie dos</div>
<div id="pietres"><ul><li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li></ul></div>
</div>
<div id="curva-inferior"></div>
</div><!-- exactamente aqui, como veras el div de la derecha o final esto hace que cierres todo el pie con el contenedor general--></div>
</body>
solo copia y pega apartir de la etiqueta <h1>
y en la hoja de estilos tmb le cambie aqui:
#pie {border-left:black 1px solid; border-right:black 1px solid;
border-top:black 1px solid; border-bottom:black 1px solid; margin-top:10px; height:65px;}
reemplaza solo el id pie le puse un border-bottom y un margin-top para que se paresca al original

Buee pruebalo a ver si eso es lo que esperabas. Saludos