Geschrieben von Christian Schnettelker

Schlagwörter:

Webdesign-Tipps 8: CSS / div auf Restbreite setzen

Kürzlich hatte ich ein kleines, aber fieses CSS-Problemchen in Zusammenhang mit „Responsive Webdesign“, dessen Lösung ich heute vorstellen möchte. Im Impressum einer Praxishomepage werden die gesetzlichen Pflichtangaben meist als zwei Spalten dargestellt. Das Ergebnis sollte wiefolgt aussehen:

Pflichtangaben Impressum
Der zuerst verwendete CSS-Code lautet:

.wrapper { width:100%; }
.wrapper .spalte-1 { float:left; width:40%; max-width:160px; }
.wrapper .spalte-2 { float:left; width:60%; }

Das Problem dabei ist die Angabe max-width bei .spalte-1. Diese soll verhindern, dass die erste Spalte zu breit wird und der Context mit Spalte 2 dann nicht mehr erkennbar ist.

Das Ergebnis obigen Codes zeigt folgender Screenshot, zur besseren Übersicht habe ich die Spalten blau/orange und das umgebende div grau eingefärbt und nur den ersten Eintrag übernommen:

Problem

Durch die Angabe von max-width:160px für die Spalte 1 (blau) erreicht diese, wenn 40% der Breite des umgebenden divs (grau) größer als 160 Pixel sind, nicht die vollen 40% des umgebenden divs. Dadurch entsteht hinter der Spalte 2 (orange) eine Lücke, vorhandener Platz wird nicht optimal genutzt, was zudem auch nicht sonderlich schön aussieht.

Natürlich möchten wir erreichen, dass die zweite Spalte breiter wird, also bis zum Ende des umgebenden divs reicht. Mit den üblichen width-Prozentangaben kommt man dabei allerdings nicht weiter und feste Breiten scheiden sowieso aus, da die Seite vollständig „responsive“ sein soll.

Die Lösung für dieses Problem fand ich (wie immer) im Netz, Stichwort „Block Formatting Context (BFC)“. Die CSS-Angaben für die Spalte 2 müssen wiefolgt geändert werden:

.wrapper .spalte-2 { overflow:hidden; }

Mit dieser Angabe funktioniert es auf wundersame Weise, hier der Screenshot:
Lösung

Jetzt wird’s kompliziert…

Falls Sie wissen wollen, warum das funktioniert, lesen Sie weiter. Andernfalls übernehmen Sie einfach den Code, unbedingt wissen muss man das mE nicht.

Magic I: jeder andere overflow-Wert als „visible“ verändert einen Block zu einem BFC-Block. Die äußere linke Seite eines BFC-Blocks berühren die linke Seite des umgebenden Blocks, auch dann, wenn float-Blöcke vorhanden sind. BFC-Blöcke erlauben es untergeordneten Blöcken aber nicht, aus diesen auszubrechen und benachbarten Blöcken nicht, in sie einzudringen.

Einfacher gesagt: der BFC-Block wird links im umgebenden div positioniert, ein float:left-Block verschiebt diese Position um seine Blockbreite. Details dazu siehe „The magic of “overflow: hidden“ (die Seite ist leider offline) und Block Formatting Context.

Magic II: Da für die Spalte 2 keine width-Angabe vorhanden ist nimmt sie automatisch den gesamten Raum zwischen dem ersten Element (Spalte 1) und dem umgebenden div ein. Sie wird aber, aufgrund des float:left des vorhergehenden ersten Elements und, da die Spalte 2 nun ein BFC-Block ist (siehe Magic I), trotzdem NEBEN diesem positioniert.

Spalte 2 als BFC-Block „floatet“ praktisch, obwohl kein float angegeben ist. Sie hat die richtige Breite, da sie automatisch auf die volle Breite des umgebenden Block gesetzt wird, als BFC-Block dem float-Block (Spalte 1) aber nicht erlaubt, in sie einzudringen. Das ist in diesem Falle genau das, was wir wollen.

Man könnte Spalte 2 übrigens auch durch float:left in ein BFC-Element verwandeln. In diesem Falle funktioniert das „floaten“ aber nicht, da wir dazu eine Breite definieren müssten, aber nicht dürfen, sonst wären wir ja wieder am Anfang.

Die Eigenschaft overflow:hidden wird hier sozusagen zur Verwandlung eines Blockes in einen BFC-Block „missbraucht“, da sie keine hinderlichen Nebeneffekte hat.

Konnten Sie folgen?

Zugegeben, das alles ist nicht unbedingt intuitiv. Ich musste mehrfach nachlesen, um es halbwegs zu verstehen und den Artikel x-mal editieren, damit die Aussagen möglichst korrekt und so klar als möglich sind. Die Lösung ist übrigens auch kein „Hack“, sondern bewegt sich innerhalb der CSS-Logik und sollte mit allen Browsern funktionieren.

Sie sehen, die Positionierung von CSS-Blöcken kann überaus einfach und logisch, dann wieder kompliziert, verwirrend und auf den ersten Blick unlogisch sein. Eine Angabe wie width:residual für Spalte 2 zur Lösung des Problems hätte wohl eher meinen simpler gestrickten Gedankengängen entsprochen.

Im Netz finden sich einige ähnliche Beschreibungen zu dieser Vorgehensweise, allerdings meist auf Englisch. Ich hoffe also, dem einen oder anderen Landsmann (oder Landsfrau) damit geholfen zu haben. Falls ja freue ich mich, wenn Sie einen netten Kommentar hinterlassen.

Kommentare

Kommentare

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen. Eine gute Rechtschreibung sollte selbstverständlich sein.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Offensichtliche SEO-Kommentare werden nicht oder in anonymisierter Form veröffentlicht.