[ERLEDIGT] Div Höhe dynamisch anpassen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
Status
Es sind keine weiteren Antworten möglich.

kurzeFrage

Neues Mitglied
25 Juli 2013
3
0
0
#1
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? 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:
<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.. :(
#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! :)
 

hfb

Neues Mitglied
22 Mai 2010
21
0
0
#2
Du darfst nicht dem div5 das "clear:both" geben, sondern einem weiteren div innerhalb(!) von div2.

HTML:
<div id="div1"> </div>
<div id="div2">
  <div id="div3"> </div>
  <div id="div4"> </div>
<div style="clear:both;"></div>
</div>
<div id="div5"> </div>
So sollte es gehen.

Das neue div kannst Du natürlich auch wie bisher mit id versehen und im Stylesheet definieren, statt wie im Beispiel direkt im HTML-Code.
Das "clear:both" im #div5 nimmst Du raus, da es dann überflüssig ist.

HTH
Alex
 
J

jesterhead

Guest
#3
Das einzige Problem ist hierbei das float:right von #div4. Lass das weg und schon hast du beide Kästen wirklich innerhalb des #div2-Containers, der sich dann auch über height:auto tatsächlich an die Höhe des größeren, eingebetteten Containers anpasst.

EDIT: #div3 wird dann noch von #div4 verdeckt, also width anpassen!
 

kurzeFrage

Neues Mitglied
25 Juli 2013
3
0
0
#5
Leider passt keine Lösung zu 100%

Also vielen Dank erstmal für die schnellen und netten Antworten, nur leider ist keine davon 100% richtig. Vielleicht liegt das aber auch an meiner Beschreibung.

Meine Frage war ja, dass sich div2 automatisch der Höhe von div3 bzw div4 anpasst. Was ich nicht ausdrücklich gesagt habe, ist dass div5 sich natürlich mit verschieben soll!

Wenn es nur um die Anpassung der Höhe gehen würde, dann könnte ich bei div2 auch einfach position: absolute setzen und fertig.

Bis jetzt habe ich also keine Lösung dafür, dass sich
1. div2 der Höhe von div3 bzw div4 anpasst UND
2. div5 immer einen bestimmten Abstand zu div2 beibehält.
 

djheke

Aktives Mitglied
8 Februar 2012
914
82
28
#6
Na es funktioniert doch so wie du es möchtest. Abgesehen davon ist mir der Sinn nicht ganz klar.
Code:
<!DOCTYPE HTML>

<html>
<head>
<meta charset="UTF-8" />
<title>Test-Layout</title>
<style type="text/css">

*  {
 margin:0;
 padding:0;
 list-style:none;
}

#div1{
height: 50px;
background-color: #808080;
position: relative;
}
#div2{
min-height: 10px;
overflow:hidden;
width: 100%;
top: 40px;
background-color: #FF0000;
}
#div3{
position: relative;
min-height: 50px;
width: 5%;
left: 15%;
float: left;
background-color: yellow;
}
#div4{
position: relative;
min-height: 50px;
background-color: green;
float: right;
width: 20%;
}
#div5{
clear: both;
position: relative;
min-height: 70px;
background-color: #808000;
top: 20px;
}

</style>
<title>Test-Layout</title>
</head>
<body>
  <div id="div1">div1</div>

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

<div id="div5">div5</div>
</body>
</html>
 
Zuletzt bearbeitet:

kurzeFrage

Neues Mitglied
25 Juli 2013
3
0
0
#7
Ja jetzt funktioniert es, vielen Dank!! Ich glaube, mein Fehler beim prüfen der Angaben, die ihr gemacht hat, war, dass ich height: auto gelassen habe und overflow: hidden nur hinzugefügt habe..
wie auch immer, DANKE! :)
 
Status
Es sind keine weiteren Antworten möglich.