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.