nicht angemeldet
Hallo,
ich würde es so machen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Unbenannt</title>
<style type="text/css">
#vll,#vlr,#ftx {
vertical-align:top;
padding:10px;
margin:0px;
}
#holder {
float:left;
width:200px;
}
#vll {
display:inline;
width:100px;
background:green;
text-align:right;
}
#vlr {
display:inline;
width:100px;
background:red;
border-left:1px solid #666;
}
#ftx {
}
</style>
</head>
<body>
<div id="holder">
<div id="vll">
linke Seite
</div>
<div id="vlr">
rechte Seite<br />
zweite Zeile<br />
zweite Zeile<br />
zweite Zeile<br />
zweite Zeile<br />
zweite Zeile<br />
zweite Zeile<br />
dritte Zeile
</div>
</div>
<br clear="all" />
<div id="ftx">Folgetext</div>
</body>
</html>
Gruss
Mark
Hi!
Wunsch:
Zwei divs stehen nebeneinander, zwischen Ihnen eine senkrechte Linie. Der Inhalt des rechten div wird unter Umständen mehrzeilig sein; bei wachsender Höhe soll die Trennlinie mitwachsen. Nachfolgende Elemente sollen unterhalb dieses Konstrukts weiterfließen.
Wirklichkeit:
Verzweifeltes rumprobieren ohne den gewünschten Erfolg!
Das brauchbarste Ergebnis sieht so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Unbenannt</title>
<style type="text/css">
#vll,#vlr,#ftx{ vertical-align:top;padding:10px;margin:0px; }
#vll{ float:left;width:100px;text-align:right; }
#vlr{ float:left;border-left:1px solid #666; }
#ftx{ float:none; }
</style>
</head>
<body>
<div id="vll">linke Seite</div>
<div id="vlr">rechte Seite<br>zweite Zeile<br>dritte Zeile</div>
<div id="ftx">Folgetext</div>
</body>
</html>
Dabei befindet sich jedoch der Folgetext rechts vom rechten div - wie zu erwarten, wenn für das rechte div float:left angegeben ist. Nehme ich dieses float:left jedoch heraus, so explodiert die ganze Angelegenheit. Ein float:none für den Folgetext hat keinen Effekt.
Ich test mit IE 6 - mit anderen Browsern wird die Depression wahrscheinlich noch stärker!
Fällt Euch was zielführendes dazu ein?
TIA Robert