# Verschieden große div Boxen dynamisch anordnen



## _voodoo (24. November 2011)

Hallo liebes Forum,
ich habe hier ein Problem mit css Boxen, das ich so grad nicht gelöst bekomme 

```
<style>
div.box
{
width:250px;
float:left;
border: solid 1px #000;
font-size:150px;
text-align:center;
}
div.container
{
width:600px;
}
</style>
<!-- (...) //-->
<div class="container">
<div class="box" style="height: 250px">1</div>
<div class="box" style="height: 350px">2</div>
<div class="box" style="height: 150px">3</div>
<div class="box" style="height: 250px">4</div>
</div>
```
Was ich möchte, ist dass Box 3 die Lücke nach oben zur 1 schließt und aufrückt.

Ist denn sowas ohne größeren Aufwand überhaupt möglich?

Ich danke euch für die Hilfe


----------



## djheke (24. November 2011)

Also, wenn eine Box 250px breit ist und dein umschließender Container nur 600px hat, wird es nichts.

Nimm die width-Angabe für .container raus. Oder du passt die Breite neu an. Wenn ich dich richtig verstanden habe, sollen jeweils 3 Boxen nebeneinander stehen.
So ergibt sich für .container folgende Breite.

3 x 250px + 2 x 3px Border link/rechts = 750px + 6px = 756px.Möchtest du später noch Außen- und Innenabstände, mußt du diese auch berücksichtigen.


----------



## _voodoo (24. November 2011)

Ich habe den Container bewusst 600px breit gemacht, damit 2 Boxen nebeneinander angezeigt werden.
Mein Ziel ist es, die Boxen vertikal aneinander zu bringen, also den selben Abstand zueinander wie horizontal.

```
+------------+  +------------+
|            |  |            |
|            |  |            |
+------------+  |            |
+------------+  |            |
|            |  +------------+
|            |  +------------+
|            |  |            |
|            |  |            |
|            |  +------------+
+------------+
```


----------



## djheke (24. November 2011)

So geht's.

Wenn du CSS3 nutzen möchtest, kannst du auch den auskommentierten Selektorblock nutzen. Dafür brauchst du dann keine neue Klasse. 

```
.box {
 width:250px;
 float:left;
 border: solid 1px #000;
 font-size:150px;
 text-align:center;
 background:#aaa;
 margin-top:10px ;
}

/*
.box:nth-child(2n){ 
 float:right; 
 background:#ade;
}
*/

.rechts {
 float:right;
 background:#ade;
}

.container {
 width:514px;
 float:left;
 background:#ddd;
 padding:10px 10px 0 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box" style="height: 250px">1</div>
<div class="box rechts" style="height: 350px">2</div>
<div class="box" style="height: 150px">3</div>
<div class="box rechts" style="height: 250px">4</div>
</div>
```

Beispiel


----------



## _voodoo (24. November 2011)

CSS3 ist doch noch nicht fertig gestellt und einheitlich in allen Browsern implementiert?

Danke schonmal für deinen Code, das schaut sehr inspirierend aus!
Was passiert aber, wenn Zwei Boxen in der "linken Spalte" eine geringere Höhe haben, als eine Box rechts ... *klick*


----------



## djheke (24. November 2011)

Na dann mach es so

```
.box {
 width:250px;
 border: solid 1px #000;
 font-size:50px;
 text-align:center;
 background:#aaa;
 margin-bottom:10px;
}

#links {
 float:left;
}

#rechts {
 float:right;
}

.container {
 width:514px;
 float:left;
 background:#ddd;
 padding:10px 10px 0 10px;
}

<div class="container">

<div id="links">
<div class="box" style="height: 150px">1</div>
<div class="box" style="height: 500px">2</div>
<div class="box" style="height: 150px">3</div>
<div class="box" style="height: 300px">4</div>
</div>

<div id="rechts">
<div class="box" style="height: 300px">5</div>
<div class="box" style="height: 100px">6</div>
<div class="box" style="height: 400px">7</div>
<div class="box" style="height: 300px">8</div>
</div>

</div>
```
hier


----------



## Zack (29. November 2011)

_voodoo hat gesagt.:


> CSS3 ist doch noch nicht fertig gestellt und einheitlich in allen Browsern implementiert?



Wenn es nach den Browserherstellern geht, wird CSS 3 niemals fertig sondern einfach immer weiter entwickelt. In allen aktuellen Browsern, ja auch IE!!, werden sehr viele Eigenschaften schon unterstütz. Dazu gehören auch die tollen neuen Selectoperatoren .


----------

