Variable höhe eines DIV-Containers

    Hallo,
    ich versuche gerade mal wieder meine CSS Kentnisse aufzufrischen und wollte mir ein Layout machen. Dieses hat im oberen Teil ein DIV-Container, der Header, einen mittleren mit dem Content und eine Fußzeile. Das ganze sieht im Moment mal so aus:

    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> </head> <body>     <div style="background-image:url(background.jpg);background-repeat:repeat; margin:0px; padding:0px; position:fixed; left:0px; top:0px; width:100%;">         <div style="background-image:url(header.jpg); background-repeat:repeat; height:115px; width:100%;">header</div>                  <div style="height:auto; width:950px; position:relative; left:50%; margin-left:-475px; margin-top:10px; margin-bottom:-10px;">             <div style="width:700px; float:left;">                 <div style="background-image:url(box_content_oben.png); background-repeat:no-repeat; height:15px; ">&nbsp;</div>                 <div style="background-image:url(box_content_mitte.png); background-repeat:repeat-y;  ">                     <div style="width:640px; background-color:#FFFFFF; position:relative; top:10px; left:20px;">Hier steht der Content                     </div>                     </div>                 <div style="background-image:url(box_content_unten.png); background-repeat:no-repeat; height:16px; ">unten</div>             </div>                          <div style=" width:250px; float:right;">                 <div style="background-image:url(box_banner_oben.png); background-repeat:no-repeat; height:14px; ">&nbsp;</div>                 <div style="background-image:url(box_banner_mitte.png); background-repeat:repeat-y; height:100%; ">                     <div style="width:195px; background-color:#000000; position:relative; top:10px; left:20px;">Content</div>                     </div>                 <div style="background-image:url(box_banner_unten.png); background-repeat:no-repeat; height:24px; ">unten</div>             </div>         </div>                <div style="background-image:url(box_footer_komplett.png); background-repeat:repeat; height:115px; width:100%; position:absolute; left:0px; bottom:0px;">footer</div>                </div> </body> </html>


    Das Problem ist jetzt aber, wenn der Contentbereich zu groß wird, also die Stelle wo steht "Hier steht der Content", dann passt sich die box zwar an, es erscheinen im Brwoser aber keine Scroll-Balken, egal, ob ich mit overflow arbeite oder nicht. Ich geh mal davon aus, ich muss meinem mittleren DIV noch irgendwie beibringen dass die Höhe Variabel sein soll?

    Glaubst du wirklich, dass sich jemand diese Buhstabenwüste ansieht? Füge Zeilenumbrüche ein und formatiere den HTML-Code ordentlich.

    Du hattest natürlich recht, irgendwie muss meine Formatierung verloren gegangen sein.
    Hier der 2. Versuch:

    Grundlagen!!!
    Es gibt auch andere HTML-Elemente als "<div>", ich bezweifel das diese DIV-Suppe wirklich nötig ist.

    Außerdem lager bitte mal das CSS in eine externe Datei aus, dann wird es wesentlich übersichtlicher.

    Eine Tabelle ist aber NICHT für das Layout gedacht, sondern zur tabellarischen Darstellung von Daten.

    Ausserdem nenne mir bitte sehr ein Browser der "height:auto" nicht richtig darstellt, mir fällt gerade keiner ein. Ich verwende es immer und es läuft in allen Firefox, IE, Opera und Safari Versionen. In Netscape und Chrome ebenfalls.