Kuno: Problem mit overflow:auto

Beitrag lesen

Auf die Idee bin ich natürlich auch schon gekommen. Dann bekomme ich aber Probleme mit gefloateten Objekten (im Beispiel die Definitionslisten).

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
<html>  
 <head>  
  <style type="text/css">  
   body {  
    background-color:red;  
   }  
  
   div#menuleiste {  
    background-color:white;  
    overflow:auto;  
   }  
  
   div#box {  
    background-color:green;  
    position:absolute;  
    top:1em;  
    height:5em;  
   }  
  
   div#content {  
    background-color:yellow;  
    padding:2em;  
    border:2px solid blue;  
   }  
  
   dl { float:left; width:10em }  
  
  </style>  
  
 </head>  
 <body>  
  
  <div id="menuleiste">Dies ist ein Menue mit <div id="box">Ueberhang</div></div>  
  <div id="content">  
   <dl>  
    <dt>Foto</dt>  
    <dd>Beschreibung des Fotos</dd>  
   </dl>  
   <dl>  
    <dt>Foto</dt>  
    <dd>Beschreibung des Fotos</dd>  
   </dl>  
  </div>  
 </body>  
</html>  

Die Listen erscheinen zwar wie gewünscht nebeneinander, jedoch überlappen dann die Listen den div#content-Kontainer.

Wer mir nicht glaubt, kann ja einfach mal ein overflow:auto in den div#content einfügen.
Scheinbar erzeugt overflow auch so eine Art z-index der auch ohne position-Angaben funktioniert.