Div Höhe dynamisch anpassen UND alles drunter verschieben

kurzeFrage

Grünschnabel
Servus an alle!

meine Frage lautet: Was muss ich in CSS einstellen, damit sich die Höhe von div2 automatisch den Höhen von div3 und div4 anpasst, sodass sich aber der Abstand zwischen div2 und div5 nicht verändert? Die Höhe von div2 soll also mindestens so groß sein, wie die größere Höhe von div3 und div4.
Anmerkung: div1 und div5 sollen nur zeigen, dass sich noch etwas über und unter div2 befindet

Hier der HTML-Code:
HTML:
<body>
<div id="div1">
</div>

<div id="div2">
<div id="div3">
</div>
<div id="div4">
</div>
</div>

<div id="div5">
</div>
</body>

und das, was ich bisher als CSS habe, das aber leider nicht richtig ist..
CSS:
#div1{
height: 50px;
background-color: #808080;
position: relative;
}
#div2{
position: relative;
min-height: 10px;
height: auto;
width: 100%;
top: 40px;
background-color: #FF0000;
}
#div3{
position: relative;
height: 50px;
width: 5%;
left: 15%;
float: left;
background-color: yellow;
}
#div4{
position: relative;
height: 50px;
background-color: green;
float: right;
width: 20%;
}
#div5{
clear: both;
position: relative;
height: 70px;
background-color: #808000;
top: 20px;
}

Vielen Dank schon mal!
 
Zuletzt bearbeitet von einem Moderator:
Hallo,
könntest du vielleicht deinen Beitrag nochmal Bearbeiten und dann die Codeabschnitte entsprechend formatieren. Macht das Lesen wesentlich einfacher.

So wie die Struktur jetzt aussieht sind die DIVs 3 und 4 innerhalb von DIV 2 platziert, das bedeutet das er automatisch die Höhe hat.

Es ist aber nicht wirklich zu erkennen wie es aussehen soll. Kannst du vielleicht mal eine Skizze/ein Bild machen.
 

Neue Beiträge

Zurück