Wie folgendes Layout 'am Besten' umsetzen?

[Jokai olvaso]

Für ein Projekt benötige ich ein ziemlich flexibles Layout. Mir schwebt da eine feste Kopfzeile und eine feste Fußzeile vor, und dazwischen eine Reihe von vorgegebenen Divs verschiedener Größe, die man dann dem Bedarf entsprechend positionieren kann (siehe Bilder).


Die einzelnen Farben stellen jeweils einen Div-Typus dar, die grauen Bereiche sollen fest sein.

Nur: welche Eigenschaften geben ich den Divs mit? Float? Oder ist mein Ansatz das mit Divs zu machen (Div-Suppe) gänzlich falsch?

Über einen kleinen Denkanstoß wäre ich sehr dankbar (natürlich ist es nicht schwierig EIN Layout zu entwerfen, nur ich habe bedenken angesichts der Flexibilität, daher wollte ich nachfragen, bevor ich mich in wildes experimentieren stürze).

[HoRnominatoR]

wenn eine zeile immer die gleiche hoehe hat, sollte es mit float moeglich sein.

[Jokai olvaso]

Hmm, die nächste Frage wäre dann, wie ich es einrichte, dass die DIVs je Reihe zusammen immer eine gleiche Breite haben.

Andernfalls müßte ich ja doch für jeden Spezialfall eine eigene CSS-Definition anlegen...



Edit:
Zwischenzeitlich hab' ich mal rumgetüffelt. Mit Float klappt es prinzipiell ganz gut, nur ist das wieder eine Pein, es in I-Ähh und den restlichen Browsern gleich aussehen zu lassen. Irgendwie werden Kombinationen aus Prozentangaben und festen Margins grundsätzlich unterschiedlich interpretiert. EM-Angaben ergeben zwar annähernd das gleiche Bild, nur kann man hier ein vorhandenes Div nicht gleichmäßig auffüllen.

Ist das äußere EM Beispielsweise 60EM weit, und man möchte dann drei innere DIVs à 20EM, so passen diese nicht in eine Zeile, wenn Ränder vorhanden sind, so dass diese etwas kleiner gewählt werden müssen, und dann links ein ungleichmäßiger Rand übrig bleibt.


Kennt jemand eine Seite, wo für solche Probleme gezielt Tipps gegeben werden?

[Terry]

Ist das äußere EM Beispielsweise 60EM weit, und man möchte dann drei innere DIVs à 20EM, so passen diese nicht in eine Zeile, wenn Ränder vorhanden sind, so dass diese etwas kleiner gewählt werden müssen, und dann links ein ungleichmäßiger Rand übrig bleibt.

Da ist das Boxmodell dran Schuld.

Grundsätzlich sieht dein Aufbau recht wirr aus - möglich ist alles, aber was willst du mit sovielen einzelnen Kästchen? - Wirklich nötig?

[Jokai olvaso]

Da ist das Boxmodell dran Schuld.

Grundsätzlich sieht dein Aufbau recht wirr aus - möglich ist alles, aber was willst du mit sovielen einzelnen Kästchen? - Wirklich nötig?

Hmmm danke, wenn ich die verlinkte Seite richtig interpretiert habe, habe ich praktisch keine Chance die Seite so zu entwerfen, dass sie meinen Vorstellungen entspricht und in allen Browsern gleich aussieht, oder?

Die Layout sind nur Extrembeispiele - in der Praxis werden es dann wohl auf einer Seite nicht ganz so viele Kästchen sein.

[Jokai olvaso]

Nach vielen Rumprobieren bin ich jetzt auf eine mögliche Umsetzung gekommen, die in allen Browsern fast aussieht.

Dazu habe ich DIVs für die einzelnen größen definiert und jeweils nochmals einen Container reingesetzt, in dem dann die Inhalte zu sehen sein werden. Ein Beispiel ist hier zu sehen.

Meine Fragen dazu: erfüllt das schon den Tatbestand einer Div-Suppe?

Und: wieso fehlt bei Firefox ein Stück des grauen Kopf-DIVs? Das innere DIV ist immer das gleiche, und bei den anderen Verschachtelungen ist auch unterhalb des DIV ein Stück des Hintergrunds zu sehen. Nur beim Kopf nicht (daran zu erkennen, dass der Hintergrund in cyan durchscheint) - wieso?

Beim Opera tritt das Phänomen auch über der Fusszeile auf.

Kann man da etwas dagegen tun?