# Höhen-variable Divs nebeneinander



## campari (3. Dezember 2011)

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:




Wenn ich die left-floate zerhauts alles. Gibts irgendeine Chance das über CSS hinzubiegen, weil ans HTML komm ich nicht ran.


----------



## Starfox2007 (4. Dezember 2011)

Poste mal deinen Code oder zumindest einen Auszug davon, denn float:left sollte hier funktionieren.


----------



## campari (4. Dezember 2011)

```
#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;}
```


```
<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


----------



## exestend (4. Dezember 2011)

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 

LG


----------



## campari (4. Dezember 2011)

Sind doch alle float:left. Versteh nicht was du meinst.
Wie gesagt, das HTML krieg ich so geliefert, da ist nix zu ändern.


----------



## Starfox2007 (4. Dezember 2011)

```
#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.


----------



## javaDeveloper2011 (4. Dezember 2011)

Weiß nicht, ob exestend genau das meinte, aber was hältst du davon?


----------



## Starfox2007 (4. Dezember 2011)

Habs gerade probiert damit sollte es gehen:


```
#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.


----------



## djheke (4. Dezember 2011)

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 ?


----------



## hela (4. Dezember 2011)

campari hat gesagt.:


> ..., weil ans HTML komm ich nicht ran.


Hallo,
wenn das HTML unverändert bleiben soll, dann würde ich es einfach mal mit CSS3-multi-columns versuchen:

```
<!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.


----------



## fbfeix (5. Dezember 2011)

machs doch einfach so:
variabler geht es nicht:


```
.left
{
float: left;
width: 620px; /*bzw. dein Wert*/
}
.right
{
float: right;
width: 620px; /*bzw. dein Wert*/
}
```

diese Klassen dann einfach deinen Divs zuordnen, je nachdem auf welcher Seite du sie haben willst


----------



## campari (5. Dezember 2011)

@fbfeix, so läufts auch nicht
http://jsfiddle.net/K5eqd/


Denke, dass hela leider Recht hat, und es irgendie über JS gelöst werden muss.


----------



## fbfeix (5. Dezember 2011)

und wieso machst dus nicht so?

http://jsfiddle.net/K5eqd/4/
und fügst dann in #1 deine divs ein und in #2 deine divs ein


----------



## TheBodo (11. Dezember 2011)

Das wäre meine Idee:


```
div {   
  width: 60px;  
  border: #ff0000 1px solid;
  margin: 10px 10px 10px 10px;
}

#wrap  {  
  width: 150px;
}

div.left {
  float: left;  
}

div.right {
  margin: 10px 10px 10px 80px; 
}

div.small {
  height: 20px;
}

div.medium {
  height: 40px;
} 

div.large {
  height: 60px;
}
```

Die Höhen in den Größen-Klassen sind nur zu Demozwecken da.
Müssteste auch weglassen können.

Alles auch zu finden unter:

http://jsfiddle.net/K5eqd/31/


----------

