Float & DIVs...

[Hans Dampf]

Hallo,
es ist zum Eierlegen, ich bin mir sicher, das folgende Anliegen ist wohl eines der meisten, seitdem es das WEB überhaupt gibt, trotzdem finde ich keine entsprechende Aufklärung, bzw. weiß auch nicht wonach ich wirklich suchen soll...

Folgende Frage...
Drei DIVs, Reihenfolge im HTML wie ausgewiesen ("1" an erster Stelle, "2" an zweiter, usw.) Wenn ich die ersten beiden DIVs nun floate und danach einen clearfix anwende, so komme ich zu folgender Anordnung:

--------------- ---------------
|               |               |
|       1       |               |
|_______________|       2       |
////////////////|               |
\\\\\\\\|               |
 ---------------|---------------
|               |
|       3       |
|_______________|

Wie schaffe ich es, die als
////////////////
\\\\\\\\
schraffierte Fläche zu unterbinden, sodass ich zu folgender Anordnung gelange?:

--------------- ---------------
|               |               |
|       1       |               |
|_______________|      2        |
|               |               |
|      3        |               |
|_______________|---------------

Danke,
HD.

[1UnitedPower]

Meine Herren!

Wie schaffe ich es, die als
////////////////
\\\\\\\\
schraffierte Fläche zu unterbinden, sodass ich zu folgender Anordnung gelange?:

Hilft das?

[Gunnar Bittersmann]

@@Hans Dampf:

nuqneH

und danach einen clearfix anwende,

Der was bewirkt? Und nun wunderst du dich, dass er es bewirkt?

Wie schaffe ich es, die als
////////////////
\\\\\\\\
schraffierte Fläche zu unterbinden,

Indem du das unterbindest, das es bewirkt.

Qapla'

[Tom]

Hello HD,

Folgende Frage...
Drei DIVs, Reihenfolge im HTML wie ausgewiesen ("1" an erster Stelle, "2" an zweiter, usw.) Wenn ich die ersten beiden DIVs nun floate und danach einen clearfix anwende, so komme ich zu folgender Anordnung:

---

|               |               |
|       1       |               |
|_______________|       2       |
////////////////|               |
\\\\\\\\|               |
---------------|---------------
|               |
|       3       |
|_______________|

Wie schaffe ich es, die als
////////////////
\\\\\\\\
schraffierte Fläche zu unterbinden, sodass ich zu folgender Anordnung gelange?:

---

|               |               |
|       1       |               |
|_______________|      2        |
|               |               |
|      3        |               |
|_______________|---------------

Sind die DIVs denn irgendwie als inline-Elemente oder inline-block-Elemente gekennzeichnet?
siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

Die gewünschte Anordnung wirst Du aber vermutlich nur hinbekommen, wenn Du die DIVs so verpackst:

-------1----------
| ---------------| ---------------
||              || |             |
||     1.1      || |             |
||______________|| |    2        |
||              || |             |
||    1.2       || |             |
||______________|| ---------------
-----------------

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Gunnar Bittersmann]

@@Tom:

nuqneH

Die gewünschte Anordnung wirst Du aber vermutlich nur hinbekommen, wenn Du die DIVs so verpackst:

Unsinn. 1UnitedPower zeigte doch schon das Gegenteil.

Qapla'

[Tom]

Hello Gunnar,

Die gewünschte Anordnung wirst Du aber vermutlich nur hinbekommen, wenn Du die DIVs so verpackst:

Unsinn. 1UnitedPower zeigte doch schon das Gegenteil.

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

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[1UnitedPower]

Meine Herren!

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

So?

[Loch ness]

Hallo,

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

So?

wenn das grüne div nur noch 1em hoch ist, rutscht das blaue nach rechts.
Unschön.

[1UnitedPower]

Meine Herren!

So?

wenn das grüne div nur noch 1em hoch ist, rutscht das blaue nach rechts.
Unschön.

Auch das kriegen wir hin.

Float-Layouts reagieren sensibel und teilweise schwer nachvollziehbar auf ihre Umwelt, das macht es schwer eine künstliche Testumgebung dafür zu schaffen. Im besten Fall entwickelt man gleich in einer natürlichen Umgebung. Kleine Tests sind aber notwendig, um das Verständnis von Floats zu verbessern.

[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! :)

[1UnitedPower]

Meine Herren!

Das Ergebnis, das ich gerne HÄTTE:

---

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

Ohne das Markup zu ändern, fällt mir keine Möglichkeit mit Ausnahme von negativen margins ein.
Das impliziert aber magic-numbers, die man eigentlich vermeiden möchte.

http://jsfiddle.net/h6HR8/3/

[Steel]

Moin!

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

Soll'n se das denn überhaupt?! Hab ich nicht so verstanden.

[qx]

Hallo,
es ist zum Eierlegen

einfache Lösung: entweder du positionierst oder änderst die Reihenfolge

gackgack qx