✔ Zweispalten Layout mit einer Trennlinie

Status
Nicht offen für weitere Antworten.
D

dhaag

Grünschnabel
Hallo,

ich versuche seit einigen Tagen ein zweispaltiges Layout zu erstellen. Das ist im Grunde nicht die Schwierigkeit, sondern das die beiden Spalten direkt aneinander liegen sollen und nur von einer 1px breiten Linie getrennt werden sollen.
Zudem kann es passieren, dass eine der beiden Spalten nach unten weiter läuft als die andere und somit muss die längere von beiden diese Trennlinie weiterführen.

Meine Frage ist ob das mit CSS überhaupt möglich ist (wenn ja wie?), da ich schon alles möglich versucht habe und es immer daran scheitert das die Spalten unterschiedlicher Länge sein können.

Danke für Eure Hilfe.

Code: 
<html>
<head>
	<title>Test</title>
</head>
<body>
	<div>
		<div style="float: left; border-left: 1px solid #DDDDDD;">
			Medienschau<br />
			Medienschau<br />
			Medienschau<br />
			Medienschau<br />
			Medienschau<br />
			Medienschau<br />
			Medienschau<br />
			Medienschau<br />
			Medienschau<br />
			Medienschau<br />
		</div>
		<div style="float: left; margin: 0px; padding: 0px; border-left: 1px solid #DDDDDD;"></div>
		<div style="border-right: 1px solid #DDDDDD;">
			Meldungen<br />
			Meldungen<br />
			Meldungen<br />
			Meldungen<br />
			Meldungen<br />
			Meldungen<br />
		</div>
	</div>
</body>
</html>
 
Hi,

das Stichwort deines Anliegens lautet "Equal-Height-Columns" (= gleichgesetzte Spaltenhöhen bzw. Spaltenhöhen, die sich automatisch gegenseitig angleichen), und in dem Artikel AnyColumnLongest findest du diverse Links zu unterschiedlichen Lösungsansätzen.

Aber auch :google: hält mit dem gleichnamigen Suchbegriff Equal-Height-Columns eine Vielzahl von Informationen und Beispiele zu der Technik bereit.
 
Maik hat gesagt.:
Hi,

das Stichwort deines Anliegens lautet "Equal-Height-Columns" (= gleichgesetzte Spaltenhöhen bzw. Spaltenhöhen, die sich automatisch gegenseitig angleichen), und in dem Artikel AnyColumnLongest findest du diverse Links zu unterschiedlichen Lösungsansätzen.

Aber auch :google: hält mit dem gleichnamigen Suchbegriff Equal-Height-Columns eine Vielzahl von Informationen und Beispiele zu der Technik bereit.
Zum Vergrößern anklicken....


Danke für die schnelle Antwort, ich hab meine Lösung angehängt.

HTML: 
	<div style="position: absolute; top: 135px;">
		<div>
			<div style="overflow: hidden;">
				<div style="float: left; border-left: 1px solid #000000; margin-bottom: -2000px; padding-bottom: 2000px">
					Medienschau<br />
					Medienschau<br />
					Medienschau<br />
					Medienschau<br />
					Medienschau<br />
					Medienschau<br />
					Medienschau<br />
					Medienschau<br />
					Medienschau<br />
					Medienschau<br />
				</div>
				<div style="float: left; backgound-color: #000000; width: 1px; margin-bottom: -2000px; padding-bottom: 2000px"></div>
				<div style="float: left; border-left: 1px solid #000000; border-right: 1px solid #000000; margin-bottom: -2000px; padding-bottom: 2000px">
					Meldungen<br />
					Meldungen<br />
					Meldungen<br />
					Meldungen<br />
					Meldungen<br />
					Meldungen<br />
				</div>
			</div>
		</div>
		<div style="">Impressum</div>
	</div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück