tengo problemas con el menu izquierdo

Que tal tengo un problema con el menú, izquierdo, lo que pasa que cuando lo intento borrar de index.html, se borra también la tabla donde va la parte central de la pagina, me podrían ayudar
este es el código HTML
<!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>TEATRO DE VIDA</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>

<div id="global">
<div id="curva-superior"></div>
<div id="cabecera"><div id="logotipo">[contenido no disponible]</div><div id="publicidad">Bienvenidos a mi Web</div></div>
<div id="navegacion">
<ul>
  • portada
  • Historia del grupo
  • Discografia
  • Conciertos
  • Descargas
  • Foro
  • Souvenir

    </div>


    <div id="contenido"><div id="menu">
    <ul>
    <h1>titulo de seccion 1</h1>
  • enlace 1
  • enlace 2
  • enlace 3
  • enlace 4


    </div><h1>Esta será la zona principal de la web</h1>
    <h2>este es el segundo parrafo</h2>


    Ya sabemos que gracias a la Hoja de Estilos, podemos cambiar el tamaño de la letra de toda la web, podemos varias los aspectos de los enlaces, los fondos de ciertos elementos, etc, etc sin más que poner la propiedad correspondiente. Pero para eso, todas las partes del contenido de la página web deben "ser algo". Si son enlaces modificaremos la etiqueta "a", si son párrafos la etiqueta "p", pero, qué etiqueta hemos de modificar para cambiar las propiedades del texto de la parte principal de nuestra plantilla? Aquella en la que pone "Esta será la zona principal de la web"?</p></div>

    <div id="pie">
    <div id="pieuno">
    <ul>
  • Foro ejemplo
  • Contactos
  • Nos Enlaza

    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • Directorio
  • TopSite
  • Mapa De La Web

    </div>
    </div>
    <div id="curva-inferior"></div>

    </body>
    </html>

    si borro el menu lateral queda asi:
    <!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>TEATRO DE VIDA</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>

    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera"><div id="logotipo">[contenido no disponible]</div><div id="publicidad">Bienvenidos a mi Web</div></div>
    <div id="navegacion">
    <ul>
  • portada
  • Historia del grupo
  • Discografia
  • Conciertos
  • Descargas
  • Foro
  • Souvenir

    </div>



    </div><h1>Esta será la zona principal de la web</h1>
    <h2>este es el segundo parrafo</h2>


    Ya sabemos que gracias a la Hoja de Estilos, podemos cambiar el tamaño de la letra de toda la web, podemos varias los aspectos de los enlaces, los fondos de ciertos elementos, etc, etc sin más que poner la propiedad correspondiente. Pero para eso, todas las partes del contenido de la página web deben "ser algo". Si son enlaces modificaremos la etiqueta "a", si son párrafos la etiqueta "p", pero, qué etiqueta hemos de modificar para cambiar las propiedades del texto de la parte principal de nuestra plantilla? Aquella en la que pone "Esta será la zona principal de la web"?</p></div>

    <div id="pie">
    <div id="pieuno">
    <ul>
  • Foro ejemplo
  • Contactos
  • Nos Enlaza

    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • Directorio
  • TopSite
  • Mapa De La Web

    </div>
    </div>
    <div id="curva-inferior"></div>

    </body>
    </html>

    y lo que es la hoja de estilo es asi:

    * {margin:0px ; padding:0px ; border: 0px}
    p {text-align: justify}
    h1 {font-size: 1.2em; color: blue; font-weighe: bold; text-decoration: underline; text-align: center}
    h2 {font-size: 1.1em; color: blue; font-weighe: bold; text-decoration: none; text-align: center}
    body {text-align: center; background-color: #BEBEBE}
    #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 }
    #navegacion {background-color: gray; border: black 1px solid; height: 20px }
    #navegacion li {float:left; list-style: none; margin: 0px 10px 0px 10px; font-size: 10px}
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {width: 150px ; float:left; text-align:left; margin-right: 10px; background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom; padding-bottom:5px }
    #menu li { list-style:none; margin: 4xp 0xp 4xp 6xp}
    #menu h1 { text-decoration:none; font-size:10px; background-image: url(objetos/menu-parte-superior.gif); padding-top:12px }
    #pie { background-color: white; border-left: black 1px solid; border-right: black 1px solid; border-top: black 1px solid; height: 65px }
    #pie li {list-style: none; font-size: 10px }
    #pieuno { float:left; width: 150px }
    #piedos { float:left;width: 498px }
    #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: black; font-size:1.3em ; text-decoration: none}
    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 }

    y queda reflejado en la pagina de esta forma:

    http://teatro.onlinewebshop.net/plantilla.html (esa es la pagina que subi en el servidor)
    gracias por su atencion
  • hola

    tienes esto:



    <div id="contenido"><div id="menu">
    <ul>
    <h1>titulo de seccion 1</h1>
  • enlace 1
  • enlace 2
  • enlace 3
  • enlace 4


    </div><h1>Esta será la zona principal de la web</h1>
    <h2>este es el segundo parrafo</h2>


    Ya sabemos que gracias a la Hoja de Estilos, podemos cambiar el tamaño de la letra de toda la web, podemos varias los aspectos de los enlaces, los fondos de ciertos elementos, etc, etc sin más que poner la propiedad correspondiente. Pero para eso, todas las partes del contenido de la página web deben "ser algo". Si son enlaces modificaremos la etiqueta "a", si son párrafos la etiqueta "p", pero, qué etiqueta hemos de modificar para cambiar las propiedades del texto de la parte principal de nuestra plantilla? Aquella en la que pone "Esta será la zona principal de la web"?</p></div>

    <div id="pie">


    te coloree en verde contenido eso lo debes dejar
    en rojo el menu que debes quitar

    si eliminas el div contenido pierdes todo el texto

    saludos