Divs neben- und übereinander

[Gunnar Bittersmann]

@@TeMPoRArYxJu

Also mein Problem ist folgendes: Ich möchte, wie auf dem Bild zu sehen ist, eine Website erstellen.

Das ist ein mögliches Layout für den eher unwahrscheinlichen Fall, dass sich jemand deine Seite auf einem großen Bildschirm ansieht. Wie soll sie auf Geräten aussehen, mit denen Menschen üblicherweise im Web unterwegs sind?

Bisher habe ich die Divs erstellt

Aus zwei Gründen problematisch: Zum einen kann es durchaus sinnvoll sein, beim Gestalten von innen nach außen zu gehen. Zum anderen sind div nicht richtig – Matthias sagte es schon.

Für den Header gibt es das header-Element, für das Navigationsmenü das nav-Element, für den Hauptinhalt das main-Element. Wobei nav durchaus im header stehen darf.

Bisher habe ich nur den Wrapper mit "float: right;" angeordnet.

float wurde zum Layouten missbraucht, als noch nichts besseres zur Verfügung stand. Die Zeiten sind vorbei – es gibt Flexbox. (In nächster Zukunft auch CSS-Grid.)

Mit Flexbox ist es dann ziemlich einfach, Boxen neben- oder übereinander anzuordnen, siehe Beispiel.

Wenn du das Fenster schmal machst, siehst du, dass sich das Layout ändert. Das einzige, was dazu nötig ist: per media query flex-direction ändern.

LLAP 🖖