Div height 100% überschreitet parent div

[Sebastian]

Hallo,
ich versuche gerade ein 3-Zeilen Layout umzusetzen.
---------------
| Banner
|Menu | Content
| Footer
---------------
Die Gesamthöhe soll dem anzeigbaren Bereich entsprechen.
Es sollen also keine Scrollbars rechts am Browser auftreten. Nur beim Content soll über overflow:scroll gescrollt werden.
Ich versuche es mit verschachtelten div,
beiße aber irgendwie auf granit:

<div class="container">
 <div class="header">
  Header
 </div>
 <div class="left">
  Menu
 </div>
 <div class="content">
  Content
 </div>
 <div class="footer">
  Footer
 </div>
</div>

mit folgendem CSS:

html, body {
 margin: 0px;
 padding: 0px;
 height: 100%;
}

.container {
 width: 850px;
 height: 100%;
 border: 1px solid blue;
}

.header {
 margin-top: 25px;
 width: 850px;
 height: 180px;
 border: 1px solid black;
}

.content {
 height: 100%;
 overflow: scroll;
 border: 1px solid red;
}

.menu {
 float:left;
 width:200px;
 border: 1px solid green;
}

.footer {
 height: 50px;
 background-color: #aaa
}

Was aber passiert ist, dass height: 100% im content dazu führt, dass die gesamte bildschirmhöhe genutzt wird und nicht 100% vom übergeordneten div "container" - zu erkennen an der roten umrandung die die blaue schneidet.
Ich verliere gerade den Durchblick und stehe mächtig auf dem Schlauch.
Wie bekomme ich "content" auf 100% der höhe von "container"?