Problem bei Homepage... CSS Fehler

Amateur

Hallo
ich bin gerade dabei ein Layout für meine Seite zu erstellen (für die die meinen letzten Thread schon gelesen haben: ja es ist immernoch die selbe Seite). Jedenfalls soll das ganze folgendermaßen aussehen: Ich habe ein Menü an der linken Seite und einen Inhaltsbereich rechts davon. Beides sind div-Bereiche. Darüber befindet sich noch ein Header-Div und das alles wird vom Container-Div eingeschlossen. Ich möchte dabei keine Scrollbar für das komplette Browserfenster, sondern das Menü soll eine eigene Scrollbar besitzen und der Inhalt-Div auch, die aber nur angezeigt werden, wenn der Inhalt über das Browserfenster hinausgeht.
Jetzt habe ich mir das ganze so gedacht dass der Container 100% hoch ist sprich über das ganze Browserfenster geht. Der Header ist 20% hoch und das Menü soll genauso wie der Inhalt 80% hoch sein.
Ich hatte das ganze schon einmal so hinbekommen, doch auf einma hat mein Browser es komplett anders angezeigt... Der Header ist viel dünner und auch die beiden Divs werden ganz anders angezeigt. Eigentlich habe ich nichts am CSS geändert aber irgendwas stimmt daran nicht... Am HTML kann es nicht liegen da dieses nur aus Tags besteht.
Ok genug der vielen Worte. Ich hoffe ich habe es so erklärt, dass ihr euch ein Bild machen könnt, was am Ende dabei rauskommen soll und findet den Fehler in meinem CSS oder könnt mir sagen warum es nicht so angezeigt wird wie ich mir das vorstelle. Verbesserungsvorschläge allgemein nehme ich natürlich auch gerne entgegen. Wer es sich nicht vorstellen kann, kann ja auch den Code kopieren und sich anzeigen lassen. Dann werdet ihr sehen was ich meine.
Also hier meine Codes:
HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="container">
	<div id="header">
         al
	</div>

         <div id="leftmenu">
         <a class="nav" href="#"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         <a class="nav"> Hallo </a>
         </div>

         <div id="content">
         <h1 class="about"> About me </h1>
         zzz<br>
         zzz<br>
         zzz<br>
         zzz<br>
         zzz<br>zzz<br>
         zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>
         zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>
         zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>
         zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>
         zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz<br>zzz
         </div>
</div>

</body>

</html>

CSS:

* {margin:0; padding:0} /* alles auf 0*/

body {background-color:#FFE1C4; padding:0 30px; font-family:arial}

/*design mainpage--------------------------------------------------*/

/* entscheidend: overflow hidden -> menü genauso groß wie container allerdings auf inhalte des
menüs achten! */
.container{text-align:left; background-color:#FFCA95; height:100%; overflow:hidden}

#header {background-color:#FFA953; height:20%;
	border:1px dotted #AE6502}

#leftmenu {background-color:#B91700; width:200px; height:80%
    	      float:left; overflow: scroll}

#leftmenu a {display:block; margin:5%; padding:2%; background-color:#E19404; border:2px solid #EFEFEF;
	    text-align:center; color:#772B26; font-family:"Bradley Hand ITC",cursive,fantasy;
             text-decoration:none}

#leftmenu a:hover {color:#FFFFFF; background-color:#98370E}

#content { height:80%; padding:5px; overflow:scroll}

/*design about--------------------------------------------------------*/
h1.about {text-align:center; color:#7F0000; text-decoration:underline;
	 font-family:fantasy}

Ich danke euch im voraus und hoffe auf Antworten auch wenn es etwas undurchsichtiger Code ist (bin noch Anfänger....)
Thx!!!

Ich möchte dabei keine Scrollbar für das komplette Browserfenster, sondern das Menü soll eine eigene Scrollbar besitzen und der Inhalt-Div auch, die aber nur angezeigt werden, wenn der Inhalt über das Browserfenster hinausgeht.

So etwas läßt sich nur mit Frames realisieren und weil es die unter XHTML nicht mehr gibt, wird das ganze sehr schwierig valide umzusetzen sein.

http://schmidt-webdesign.net/

Nachtrag:

Statt der Frames: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow

Allerdings spielen hierbei nicht alle Browser wie gewünscht mit - aber wann tun sie das schon.

http://schmidt-webdesign.net/

Amateur

hmmm ja overflow hab ich schon eingebaut aber es will irgendwie nicht so wie ich will... es ging ja damit aber plötzlich hat er wieder alles durcheinander geschmissen... ich hab schon designs gesehen wo das ganze auch ohne frames gemacht wurde... aber irgendwie will es bei mir nicht hinhauen...
naja vielleicht findet ja noch jemand den fehler. denn ich hatte schon vor wenn alles soweit fertig ist das ganze auf xhtml standard umzuschreiben. und wenn ich dann keine frames mehr nehmen kann bringt mir das nix...

mantiz

Beim overflow kommt es darauf an, wie Du es machst. Ich hab' letztens eine Seite umgesetzt mit absoluter Positionierung und XHTML 1.0 Strict und da klappt das mit dem overflow tadellos in Firefox, Opera und IE.

Überhaupt keine Probleme.

Amateur

Ja bei mir hat es auch ne zeit lang geklappt aber irgendwie will es nicht mehr...
ich versteh es einfach nicht...
ich habe keine ahnung wo der fehler liegt... ich werde es nochmal mit dem table attribut in css verwenden (keine html table...) ich hoffe das klappt ansonsten weiß ich es echt nicht mehr... vielleicht sieht ja von euch noch jemand einen fehler in meinen quelltexten...