ich sitze jetzt schon ein paar Stunden und suche nach einer Lösung für folgendes Problem:
Ich habe ein DIV (Übergeordnet) in dem drei weitere gleichgroße DIV (height: 200px) liegen.
Diese drei DIV sollen alle übereinander liegen. Das tun diese auch! Ich mache es mit position: relative.
Allerdings wird das übergeordnete DIV auf 600px aufgerissen, obwohl die Höhe insgesamt ja nur 200px sein soll. Das möchte ich gern verhindern!!!
Habe den Quellcode mal raus genommen zum testen und mit border versehen damit man es besser sieht.
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
#eltern-div{
border: 1px solid #0261ae;
}
#div1{
height: 200px;
border: 1px solid #0261ae;
}
#div2{
position: relative;
top: -200px;
height: 200px;
left: 0px;
border: 1px solid #0261ae;
}
#div3{
position: relative;
top: -400px;
height: 200px;
left: 0px;
border: 1px solid #0261ae;
}
</style>
</head>
<body>
<div id="eltern-div">
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
</div>
</body>
</html>