Hallo, folgender html code:
Hier das CSS:
Meine Frage dazu:
Das rechte Div vergrößert ja anscheinend auch das Elternelement (in die Höhe) je mehr Text drinne steht. Wie mache ich das mit dem linken div bzw. das linke soll sich ja nicht nur vergrößern wenn dort mehr Text drinne steht, sondern auch, wenn das rechte div größer wird. Ich habe jetzt mal zum Probieren die Höhe auf 100% gesetzt, in der Hoffnung, dass es dann bis zum unteren Rand des Divs "aussen" geht, aber das hat auch nichts gebracht - jetzt geht es weit darüber hinaus...
Ich weiß, dass das nichts mehr mit dem ursprünglichem Titel zu tun hat, aber die anderen Probleme konnte ich beheben, sodass dies jetzt mein Hauptproblem ist.
Danke und MfG.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div id='aussen'>
<div id='balken'>
Heute, 10:20 Uhr
<div id='nummer'>
#1
</div>
</div>
<div id='links'>
<span id='name'>Mein Name</span><br /><br />
<span id='ort'><span class='fett'>Ort:</span> Nirgendwo im Irgendwo im Nirgendwo</span>
</div>
<div id='rechts'>
<span id='überschrift'>
Überschrift
</span>
<hr />
Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext
</div>
</div>
</body>
</html>
Hier das CSS:
Code:
#aussen { border:1px solid #009;
min-height:300px;
}
#balken {
position:relative;
top:0;
left:0px;
border:none;
background-color:#009;
height:25px;
text-align:left;
color:white;
padding-left:5px;
}
#nummer {
float:right;
color:white;
margin-right:5px;
}
#links {
position:absolute;
background-color:#F0F0F0;
height:100%;
width:200px;
padding:5px;
}
#name {
color:#009;
font-weight:bold;
}
#ort {
font-size:14px;
}
.fett {
font-weight:bold;
}
#rechts {
padding:5px;
padding-left:215px;
}
#überschrift {
}
Meine Frage dazu:
Das rechte Div vergrößert ja anscheinend auch das Elternelement (in die Höhe) je mehr Text drinne steht. Wie mache ich das mit dem linken div bzw. das linke soll sich ja nicht nur vergrößern wenn dort mehr Text drinne steht, sondern auch, wenn das rechte div größer wird. Ich habe jetzt mal zum Probieren die Höhe auf 100% gesetzt, in der Hoffnung, dass es dann bis zum unteren Rand des Divs "aussen" geht, aber das hat auch nichts gebracht - jetzt geht es weit darüber hinaus...
Ich weiß, dass das nichts mehr mit dem ursprünglichem Titel zu tun hat, aber die anderen Probleme konnte ich beheben, sodass dies jetzt mein Hauptproblem ist.
Danke und MfG.
Zuletzt bearbeitet: