Höhen-variable Divs nebeneinander

C

campari

Erfahrenes Mitglied
Habe mehrere DIVs mit fester Breite und variabler Höhe. Die stehen im HTML einfach untereinander weg.
Nun sollen die in 2 Spalten aufgeteilt werden, immer ohne nennswerten Abstand anschliessend nach oben ans vorherige Element, so:

div-pair.png

Wenn ich die left-floate zerhauts alles. Gibts irgendeine Chance das über CSS hinzubiegen, weil ans HTML komm ich nicht ran.
 
CSS: 
#wrap {width:620px;}
.box {width:300px;height:100px;border:1px solid red;margin:2px;float:left;}
.small {height:150px;}
.medium {height:200px;}
.large {height:250px;}
HTML: 
<div id="wrap">
	<div class="box large">#1</div>
	<div class="box small">#2</div>
	<div class="box large">#3</div>
	<div class="box">#4</div>
	<div class="box medium">#5</div>
	<div class="box large">#6</div>
	<div class="box">#7</div>
	<div class="box small">#8</div>
</div>


Habs mal hochgeladen, hier sieht man die Abstände zum oberen Div jeweils. Es wird nicht gleichmässig, ohne Abstand verteilt:
http://atomlol.at.funpic.de/extern/float.htm
 
Wenn div 1,3,5 und 7 im Wrapper sind müssen die Float left sein und die Boxen 2,4,6 und 8 müssen ebenfalls float:left ein,damit sie sich an den anderen Boxen orientieren..dann klappts auch mit den Boxen :D

LG
 
Zuletzt bearbeitet:
Sind doch alle float:left. Versteh nicht was du meinst.
Wie gesagt, das HTML krieg ich so geliefert, da ist nix zu ändern.
 
CSS: 
#wrap {width:620px;}
.box {width:300px;height:100px;border:1px solid red;margin:2px;float:left;}
.small {height:150px; float:left;}
.medium {height:200px; float:left;}
.large {height:250px; float:left;}

Probier mal die einzelnen auch zu floaten, auch wenn du es schon Global für Box gesetzt hast.
 
Zuletzt bearbeitet:
Habs gerade probiert damit sollte es gehen:

CSS: 
#wrap {width:620px;}
.box {width:300px;height:100px;border:1px solid red;margin:2px;float:left;}
.box small {height:150px;}
.box medium {height:200px;}
.box large {height:250px;}

du hast die Klassen nicht richtig angesprochen.
 
Dies Frage wurde doch schon einmal hier > gestellt. Hier mal ein Beispiel Die Klassen und Id's kannst du dir ja alle noch umbenennen.


Wolltest du es so ?
 
Zuletzt bearbeitet:
campari hat gesagt.:
..., weil ans HTML komm ich nicht ran.
Zum Vergrößern anklicken....
Hallo,
wenn das HTML unverändert bleiben soll, dann würde ich es einfach mal mit CSS3-multi-columns versuchen:
HTML: 
<!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" xml:lang="de-de" lang="de-de" >
<head>
<style type="text/css">
	#wrap {
		width: 620px;
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
	}
	.box {
		display: inline-block;
		width: 300px;
		height: 100px;
		margin: 2px;
		border: 1px solid red;
	}
	.small {height:150px;}
	.medium {height:200px;}
	.large {height:250px;}
</style>
</head>
<body>
	<div id="wrap">
		<div class="box large">#1</div>
		<div class="box small">#2</div>
		<div class="box large">#3</div>
		<div class="box">#4</div>
		<div class="box medium">#5</div>
		<div class="box large">#6</div>
		<div class="box">#7</div>
		<div class="box small">#8</div>
	</div>
</body>
</html>
Funktioniert mit den Mozilla- und den Webkit-Browsern, für IE müsste man m.E. ein Javascript einsetzen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück