Dreispaltiges Layout mit Flexbox und zwei Media Queries

[Bimmelbeule]

Hallo Rolf!

Wenn Du aber sowas haben willst (muss ich jetzt als ASCII Art zeichnen, keine Ahnung ob und wie sich sowas downmarken lässt)

+-------+---------------+
|       |               |
| NAV   |  INHALT       |
|       |               |
|       +---------------+
|       |  ASIDE        |
+-------+---------------+

dann brauchst Du zwei Flexboxen. Oder Grid.

Du hast natürlich recht! Ich will es so haben, wie auf deiner ASCII-Grafik (so hätte ich das auch visualisieren sollen).

Wenn das nav tatsächlich nicht höher werden muss als der Inhalt, dann geht es so: https://jsfiddle.net/Rolf_b/cfrbyq94/3/. Es ist aber schon Gefummel.

Mit Grid dagegen sähe es so aus:

https://jsfiddle.net/Rolf_b/roLh0snk/

Die Navigation geht vertikal bis zum footer. Wenn Du das nicht willst, ändere das Grid-Template ab. Da steht das "nav" in zwei Zeilen; ersetze das untere durch einen anderen Namen (wenn Du Inhalt für diese Zelle hast) oder einfach durch ein "-".

Ein drittes Mal bedanke ich mich bei Dir! Du hast dir ja echt ein Bein ausgerissen, um mir zu helfen!

Ich glaube, das mir die zwei Flexboxen noch weniger gefallen, als die deutlich größere CSS-Datei bei grid…

Ich sehe es ein; ich werde mich wohl mit grid beschäftigen müssen… obwohl ich vermutlich nur deine Lösung leicht verändern muss (grid scheint ja wirklich leicht verständlich zu sein).

Nochmal; Danke, Rolf, für deine Arbeit! Und meinen Dank auch allen anderen, die zur Lösung meines Problems beigetragen haben.

P.s. »Linkadillo for your Cigarillo« 😂

Einen schönen Tag noch!

Rolf