Float & DIVs...

[Hans Dampf]

Meine Herren!

Kann ich jetzt nicht nachvollziehen, wie Du sicherstellen willst, dass die beiden linken DIVs immer untereinander stehen.

So?

Oje... da hab ich mich, in der Absicht, mein Problem möglichst vereinfacht darzustellen, wohl missverständlich ausgedrückt ... :(

Die vorgeschlagene(n) Strategie(n) funktionieren natürlich, solange ich nur zwei DIVs nebeneinander anordnen will... angenommen es wären sechs DIVs, und ich möchte sie der Reihenfolge nach nicht VERTIKAL (wäre ja, wie schon von Tom angemerkt, kein Problem:

-------1---------  -------2-------    // ETC.
| ---------------| ---------------    // ETC.
||              || |             |
||     1.1      || |     2.1     |
||______________|| |-------------|
||              || |             |
||    1.2       || |     2.2     |
||______________|| ---------------
-----------------
) sondern HORIZONTAL anordnen, sodass DIVs 1-3 direkt über DIVs 4-6 liegen, dann entsteht

1. durch den Befehl float:right zwischen dem 2. und 3. DIV eine unschöne Lücke, sobald ich insgesamt weniger als 100% erreichen möchte (kann zugegebenermaßen mit einer alle DIVs umgebenden <Section> entschärft werden)

und

2. DIV 4 ordnet sich auf Höhe von DIV 2 an, sobald dieses höher als DIV 1 ist; bzw. DIV 6 reagiert überhaupt nicht auf das ihm zugewiesene CSS...

HIER DIE HTML-AUSZEICHNUNG, DIE ICH VERWENDE:

1. Folgendes CSS:

  
section {  
	width: 70%;  
}  
div {  
    width: 33.333%;  
	color: #FFFFFF;  
	font-family: Arial, Helvetica, sans-serif;  
}  
  
div:nth-child(1){  
    background-color: red;  
	height: 10em;  
    float: left;  
}  
div:nth-child(2){  
	background-color: blue;  
	height: 15em;  
    float: left;  
}  
div:nth-child(3) {  
	background-color: green;  
	height: 20em;  
    float: right;  
}  
div:nth-child(4){  
    background-color: purple;  
	height: 20em;  
    float: left;  
}  
div:nth-child(5){  
    background-color: grey;  
	height: 15em;  
	float: left;  
}  
div:nth.child(6) {  
	background-color: red;  
	height: 10em;  
    float: left;  
}  
  

2. Im Body-Bereich 6 DIVs

-----------------------------------------------------------------

Das Ergebnis, das ich gerne HÄTTE:

---------------------------
|       |        |        |
|   1   |    2   |   3    |
|       |        |        |
--------|        |        |
|       |--------|        |
|   4   |        |--------|
|       |    5   |        |
|       |        |    6   |
|       |        |        |
---------------------------

Danke an alle, die sich meiner annehmen! :)