Problem bei Spalten mit CSS

[marctrix]

Hej Rolf,

du hast da eine bunte Mischung aus Positionierungen, und alle haben ihre eigenen Tücken.

Die man kaum in ein vernünftiges und vor allem stabiles, responsives Layout umwandeln kann.

Du solltest ein konsistentes Positionierungsverfahren verwenden.

grid oder flexbox sind das Mittel der Wahl.

Wenn dein .links Bereich keine Navigation ist, kannst Du dort auch aside verwenden.

Passt oft, aber nicht immer, hängt vom Inhalt ab!

Ein alternatives Verfahren, das ich vor einigen Jahren mal angewendet habe, ist ein Seiten-Layout mit position:absolute. Ich habe das hier mal rudimentär aufgebaut, es hat den "Vorteil", den neumodischen Schnickschnack wie flexbox und grid nicht zu brauchen und daher auch mit älteren Browsern zu kooperieren. Heutzutage ist dieser Vorteil aber kaum noch was wert.

Du hast ja schon selber angesprochen, dass jede Layout-Technik ihre speziellen Eigenheiten hat. Oder (um es beim Namen zu nennen): sie haben ihre eigenen Nachteile.

Wobei Grid eine Sonderrolle einnimmt, weil sich der einzige Nachteil dieser Technik in absehbarer Zeit von selber erledigt: grid ist umständlich oder nicht verwendbar, wenn noch alte oder sehr alte Browser unterstützt werden müssen. Sobald sich das erledigt hat, sollte Grid für alle Layout-Aufgaben verwendet werden.

Und ja, @Gunnar Bittersmann, ich finde auch: untereinander stehende Boxen, die bedienbar sind, reichen als Fallback vollkommen aus (angesichts der Tatsache, dass diese kaum noch eine Rolle spielen und ihr Marktanteil weiter stetig sinkt).

Deine Technik, @Rolf B hat leider besonders gravierende Nachteile und nur einen Vorteil: funktioniert in uralten Browsern ohne nennenswerten Marktanteil. Aber wie du du selber anmerkst, ist das eigentlich gar kein Vorteil mehr. Besser nicht machen, auch wenn es schade ist, eine Technik aufgeben zu müssen, die man mal gerne eingesetzt hat (wobei die immer an mehreren Stellen problematisch war. Z. B. sollte man niemals Dimensionen in Pixeln angeben!)

Alle 3 Fiddles, die ich verlinkt habe, erzeugen das gleiche Ergebnis. Nur ist der Weg dahin mal mehr und mal weniger steinig 😀.

Sie erzeugen ganz und gar nicht das gleiche Ergebnis - es sieht nur auf den ersten Blick gleich aus. Besonders gut werden die Unterschiede sichtbar, wenn man responsiv arbeiten will; da wird man sehr schnell merken, wo die Steine liegen. 😉

Übrigens gibt es viele Layout-Beispiele im Web für Grid. Ich finde am besten ist die Grid-Beispiel-Sammlung von Rachel Andrew.

Marc