molily: Einfaches floaten mit 100% width

Beitrag lesen

Hallo,

Aus dem Quellcode, den du gepostet hast, werde ich nicht schlau, weil wichtige Inhalte und Bilder fehlen. Die Bitte, den Code einmal als funktionsfähiges Beispiel hochzuladen, kam nicht von ungefähr.

Wenn eine Spalte den restlichen Raum einnehmen soll, lässt man üblicherweise eine Spalte floaten, nämlich die mit der festen Breite. Die andere Spalte floatet nicht, hat auch keine with-Angabe, sondern bekommt margin-left mit jener Breite – oder sie wird ein »Block Formatting Context«.

Siehe meinen Artikel Grundlagen für CSS-Spaltenlayout:
Mehrspaltigkeit mit float

Alternativ können beide Spalten floaten und Prozentwerte bekommen (z.B. 20% und 80%). Sie passen sich dann an die Viewport-Breite an. In dem Fall sollte man gegebenenfalls mit einer max-width für den Container arbeiten, damit der Inhalt auf großen Viewports nicht unlesbar wird. Für kleine Viewports kann man die Mehrspaltigkeit durch Media-Queries aufheben (float: none).

In beiden Fällen solltest dem Footer clear: left oder clear: both geben oder alternativ einen Clearfix anwenden, damit der Footer immer unter den Spalten liegt (ich nehme an, das hast du vor).

Grüße,
Mathias