Creación de bordes. Se extienden demasiado

HOla,
Tengo un problema con la creación de bordes, en el capítulo 3 del curso. Al definir un borde en estilos-general.css, siempre lo hace hasta el final de las capas existentes por debajo de la que se esté definiendo. En este caso están en ese orden: cabecera-navegación-contenido-pie. Al crear el borde para "cabecera" lo hace englobando hasta "pie". Cuando le creo el borde derecho e izquierdo de "contenido", los extiende hasta "pie". He revisado varias veces el código y seguido la secuencia paso a paso, no sé en que fallo. :shock:

Escribo mis códigos a continuación:

Plantilla.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Plantilla</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">Wilkommen zu meiner Web<div/>
<div id="navegacion">Barra de Navegeichon<div/>
<div id="contenido">
<div id="menu">
<ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    </div>
    <h1>Este será el espacio principal de la página weber</h1>


    Vamos a ver que escribo aquí. Ja ne znaiu chto pisat cejchas, ja ustal chut chut, Sledujushuju nedelja priedet moja ljubov!</p>
    <h2>As ne supranto visa, kaip tau sekasi.</h2>

    Das ist Klasse! Ich weiss nicht was schreiben als immer, aber kann een bischen probieren...hmm Tas ir galds! Es esmu duraka.</p>
    <div/>
    <div id="pie">Este es el pie de la página<div/>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    y este el de estilos-general.css

    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global{width:800px; margin:4px auto}
    #cabecera {background-color: white ; border-left: black 1px solid ;border-right: black 1px solid}
    #navegacion {background-color:gray; border: black 1px solid}
    #contenido {background-color:orange;width:auto;border-left: black 1px solid ; border-right: black 1px solid }
    #pie {background-color:white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid}
    #menu{background-color:yellow;width:150px;float:left;text-align:left;margin: 3px 10px 3px 3px }
    #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{}
    p {text-align: justify}
    #contenido p {padding: 5px 10px 5px 10px;text-indent:15px}
    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}
    #curva-superior { background-image: url(Objetos/curva-superior.gif) ; background-repeat: no-repeat;width:800px ;
    height: 12px;overflow : hidden }
    #curva-inferior { background-image: url(Objetos/curva-inferior.gif) ; background-repeat: no-repeat;width:800px ;
    height: 12px;overflow : hidden }

    gracias de antemano al que se tome la molestia y tiempo de leer esto.
  • Ejem, perdón, luego de haber analizado paso a paso con otros códigos aquí presentes, me dí cuenta del error, puse el / al final de <div/> en vez de </div>.
    Pues vaya tontería, me ha tenido loco todo el día.