Wie mächtig ist floatendes CSS-Layout?

[Scooter]

Hi,

habe mich nun etwas mit CSS-Layout beschäftigt und auch den tollen Artikel dazu von Ingo bei SelfHTML (teilweise) gelesen.
Ich finde es ist schon ne tolle Sache seine Seiten mit CSS zu layouten, frage mich aber trotzdem wie mächtig das Ganze ist.

Ich finde nämlich keine Lösung für z.B. folgendes Problem:

-------------------------------
|    Box 1 mit Inhalt         |
-------------------------------
-------------------------------
| Box 2 mit anderem Inhalt     |
--------------------------------

Nun möchte ich die Seite anders layouten und die beiden Boxen vertikal (!!) vertauschen. Also so:

-------------------------------
| Box 2 mit anderem Inhalt     |
--------------------------------
-------------------------------
|    Box 1 mit Inhalt         |
-------------------------------

Mit absoluter Positionierung natürlich gar kein Problem, aber floatendes Layout ist wohl besser. Wie geht es also mit floats?

Der Code sieht dann etwa so aus:
<div id="box1">Inhalt1</div>
<div id="box2">Inhalt2</div>

Ähnliche Probleme gab es bei 3 nebeneinander stehenden Boxen ("Spalten"), die mit floats ausgerichtet wurden. Man konnte das Layout zwar mit float:left und right in 2 der 3 Boxen ansatzweise ändern, aber jede denkbare Anordnung (6 insgesamt) der Spalten hab ich nicht hinbekommen. In dem CSS-Layout Artikel steht, dass das letzte definierte Element kein float enthalten darf, sondern die beiden davor definierten Elemente (Spalten) um die dritte Spalte herum fließen.
Man kann also z.B. beide links oder rechts herum fließen lassen:

1 | 2 | 3
3 | 1 | 2

Aber ein Umordung der beiden Spalten mit floats konnte ich nicht erreichen. Da wurde dann die Reihenfolge genommen, wie es im HTML-Doc steht.

Wieviel kann man also machen mit diesem floating CSS-Layout?

Gruß
Scooter!

[Ingo Turski]

Hi,

Nun möchte ich die Seite anders layouten und die beiden Boxen vertikal (!!) vertauschen. Also so:

---

Box 2 mit anderem Inhalt

---

Box 1 mit Inhalt

Mit absoluter Positionierung natürlich gar kein Problem, aber floatendes Layout ist wohl besser. Wie geht es also mit floats?

gar nicht. Allerdings ist das mit absoluter Positionierung durchaus nicht problemlos. Du übersiehst, daß in den Boxen enthaltener Text vergrößert werden kann oder die Boxen nicht in zu kleinen Browserfenstern passen könnten.
Ich sehe aber auch nicht viel Sinn in einer zur Notierung umgekehrten Darstellung. Geringfügige Vorteile bei Suchmaschinen vielleicht. Für Screenreader wäre ein (unsichtbarer) Link zur nächsten Box möglich.

In dem CSS-Layout Artikel steht, dass das letzte definierte Element kein float enthalten darf

Nein. Es kann - beim zuletzt notierten Element - auf float verzichtet werden, muß aber nicht.
Der Vorteil dabei (und der Grund, weshalb es so in den Beispiel-Layouts ist) ist die erhöhte Flexibilität bzw. Ausgleich unterschiedlicher Box-Modele durch Verzicht auch auf eine Breitenangabe.

Man kann also z.B. beide links oder rechts herum fließen lassen:

1 | 2 | 3
3 | 1 | 2

Aber ein Umordung der beiden Spalten mit floats konnte ich nicht erreichen. Da wurde dann die Reihenfolge genommen, wie es im HTML-Doc steht.

Wenn Du allen Boxen float (und Breite) gibst, wäre zumindest 1-3-2, 2-3-1 und 3-2-1 möglich.
Für andere Anordnungen würde es reichen, ein Element absolut zu positionieren, z.B.
3 position:absolute und 1 und 2 float:left.

Wieviel kann man also machen mit diesem floating CSS-Layout?

Viel und das vor allem flexibel. Aber nicht alles.

freundliche Grüße
Ingo

[wahsaga]

hi,

Nun möchte ich die Seite anders layouten und die beiden Boxen vertikal (!!) vertauschen. [...]

Mit absoluter Positionierung natürlich gar kein Problem, aber floatendes Layout ist wohl besser. Wie geht es also mit floats?

dass das nicht "aufgabe" von floats ist, sagte Ingo ja schon.

recht informativ zu diesem thema könnte auch noch Dirks neuer artikel Die wichtige Reihenfolge von Webinhalten sein.

gruß,
wahsaga