Bilder werden nicht als Content erfasst

[extra007]

Guten Tag,
ich habe ein Layout mit CSS realisiert. Der Bereich des Content soll sich mit height: 100%; an den Inhalt anpassen und sich dementsprechend verlängern. Das funktioniert auch soweit. Sofern allerdings Bilder ins Spiel kommen, passt sich der Content weiterhin nur an den Text an. Wie kann ich dafür sorgen, dass der Hauptteil sich auch verlängert, wenn Bilder den "Rahmen sprengen"? :(

html {  
        background: #f1f1f1;  
}  
  
body {  
        font: 10pt georgia;  
        text-align: justify;  
        color: #8f8f8f;  
        position: relative;  
        width: 800px;  
        left: auto;  
        right: auto;  
        margin: auto;  
        padding: 5px;  
  
}  
  
a:link { color: #7c7c7c; text-decoration:none; }  
a:visited { color: #7c7c7c; text-decoration:none; }  
a:hover { color: #676767; text-decoration: underline; }  
a:active { color: #7c7c7c; text-decoration: none; }  
  
h1, h2 {  
         font-weight: bold;  
         border-bottom: 1px solid #999;  
         width: 730px;  
   }  
  
h3 {  
         font-weight: bold;  
         border-bottom: 1px solid #999;  
         width: 300px;  
   }  
  
img {  
         margin: 10px;  
         margin-top: 5px;  
         margin-bottom: 0px;  
    }  
  
  
/* --- SPECIAL DIVS --- */  
/* header (logo, aktuell), navigation, content, footer */  
  
  
container {  
        background: #ff0000;  
        padding: 0px;  
        position: absolute;  
}  
  
#head {  
         background: url(head.png) repeat-y;  
         width: 100%;  
         height: 100%;  
         padding: 5px 20px 5px 20px;  
}  
  
#header {  
         background: url(content.png) repeat-y;  
         width: 100%;  
         height: 100%;  
         padding: 5px 30px 0px 20px;  
}  
  
#aktuell {  
         background: #ebebeb;  
         width: 300px;  
         height: 150px;  
         margin-right: 40px;  
         padding: 0px 5px 5px 5px;  
         float: right;  
  
         border:1px solid #ebebeb;  
         -moz-border-radius:10px;  
         -khtml-border-radius:10px;  
  
}  
  
#middle {  
  
         width: 100%;  
         float: left;  
         padding: 5px 0px 0px 20px  
}  
  
  
  
#content {  
         background: url(content.png) repeat-y;  
         width: 100%;  
         height: 100%;  
         z-index: 1;  
}  
  
#inhalt {  
         background: #fff;  
         width: 750px;  
         height: 100%;  
         margin-left: 30px;  
         padding: 30px 0px 0px 0px;  
}  
  
#footer {  
         background: url(footer.png) no-repeat;  
         width: 100%;  
         height: 100%;  
         padding: 5px 20px 5px 20px;  
}  
  
/* --- NAVIGATION --- */  
  
  ul#Navigation {  
    margin: 0; padding: 5px;  
    text-align: center;  
  
         background: #a0ca78;  
         width: 748px;  
         height: 20px;  
         margin-right: 40px;  
         padding: 5px;  
         float: left;  
  
         border:1px solid #ebebeb;  
         -moz-border-radius:10px;  
         -khtml-border-radius:10px;  
  }  
  
  ul#Navigation li {  
    list-style: none;  
    float: left;  
    position: relative;  
    margin: 0; padding: 0;  
  }  
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */  
    margin-bottom: -0.4em;  
  }  
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */  
    margin-bottom: -0.1em;  
  }  
  
  ul#Navigation li ul {  
    margin: 0; padding: 0;  
    position: absolute;  
    top: 1.6em; left: -0.4em;  
    display: none;  /* Unternavigation ausblenden */  
  }  
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */  
    left: -1.5em;  
    lef\t: -0.4em;  
  }  
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */  
    background-color:silver; padding-bottom:0.4em;  
  }  
  ul#Navigation li:hover ul {  
    display: block;  /* Unternavigation in modernen Browsern einblenden */  
  }  
  ul#Navigation li ul li {  
    float: none;  
    display: block;  
    margin-bottom: 0.2em;  
  }  
  
  ul#Navigation a, ul#Navigation span {  
    display: block;  
    width: 9.2em;  /* Breite den in li enthaltenen Elementen zuweisen */  
    padding: 0.2em 1em;  
    font-weight: bold;  
    background-color: #a0ca78;  
    color: #676767;  
    text-decoration: none;  
  }  
  * html ul#Navigation a, * html ul#Navigation span {  
    width: 9.2em;   /* Breite nach altem MS-Boxmodell für IE 5.x */  
    w\idth: 7em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */  
  }  
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {  
        color: #676767;  background-color: #a0ca78;  
  }