Layout Packs

Ich dachte, ich probiere mal ein paar gängige Mehrspalten-Layout-Stile mit fließender Breite aus, die mit CSS notorisch schwierig sind.

Eine Möglichkeit, ein fließendes Mehrspaltenlayout zu realisieren, ist die Einstellung der Spalten mit Prozentwerten. Zum Beispiel, indem eine linke Spalte mit 19 % Breite und eine rechte Spalte mit 80 % Breite gefloatet werden (weniger als 100 % verhindert, dass sie sich gegenseitig überlappen und herunterfallen). Ich mag diese Methode überhaupt nicht. Sie verhindert, dass man pixelbasierte Abstände auf diesen Spalten hat (problematisch), was zu zusätzlichen divs führt. Noch schlimmer ist, dass die "Gutter" (Abstände) zwischen diesen beiden Spalten wachsen und schrumpfen, sodass am schmalsten Fenster des Browsers 1 % zu schmal ist und am breitesten zu breit.

Eine weitaus bessere Technik für fließende Breiten (vorausgesetzt, Sie sind damit einverstanden, dass nur eine Ihrer Spalten die "fließende" ist) ist, sich überhaupt nicht auf Prozentwerte zu verlassen, sondern stattdessen Min- und Max-Breiten für eine einzelne Spalte zu verwenden. Tatsächlich ist diese einzelne Spalte keine wirkliche Spalte, sondern die gesamte Breite des Layouts. Der Inhalt darin kann durch Abstände von den Rändern weggedrückt werden, was Platz für absolut positionierte Seitenleisten schafft.

Diese Technik hat zahlreiche Vorteile

• Keine Floats bedeuten ein viel weniger fragiles Layout. Keine Sorgen über Spalten, die sich ausdehnen und den Inhalt, den sie enthalten, sprengen
• Abstände zwischen den Spalten können konsistent gesteuert werden
• Generell Pixel-basiert, was pixelbasierte Abstände/Ränder ermöglicht

Für eine sehr gute Zusammenfassung der hier wirkenden Theorien, siehe Dan Rubins Absolute Columns. Diese sind sehr ähnlich, nur mit der Idee, sie auf fließende Breiten auszudehnen.

Siehe die Demos

• Fest, Fließend
• Fest, Fließend, Fest
• Fließend, Fest
• Halb und Halb*

Alle herunterladen

IE 6

Ich bin sicher, die meisten von Ihnen haben sofort an all die Probleme mit IE 6 gedacht. Wir wissen ganz genau, dass min/max-Breite in IE 6 nicht funktionieren wird. Und top/left/bottom oder height: 100 % für diese Seitenleisten werden auch nicht funktionieren. Was also tun wir?

Es gibt eine Reihe von Möglichkeiten, damit umzugehen, Sie müssen nur die genaue Situation auf Ihrer eigenen Website beurteilen, um zu entscheiden, wie. Vielleicht stört es Sie nicht, wenn min-max-Breite nicht funktioniert (alles, was in IE 6 passiert, ist, dass die max-Breite 100 % und die min-Breite 0 % ist). Vielleicht sind Ihre Seitenleisten nicht unterschiedlich gefärbt, sodass es Ihnen egal ist, ob sie bis zum Ende reichen oder nicht.

Ich denke, die eleganteste Lösung für den Umgang mit IE 6 (wie Dan in seinem Absolute Columns Artikel vorgeschlagen hat) ist das Dean Edwards IE7.js Skript. Werfen Sie einfach dieses kleine Juwel in den Kopfbereich und Ihre Probleme sind gelöst

<!--[if lt IE 7]>
    <script src="//ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Testen

Ich habe mir das in IE 6 und höher sowie in allen anderen beliebten Browsern, die ich installiert habe, angesehen und es hat überall funktioniert. Wenn Sie jedoch Probleme feststellen, lassen Sie es mich wissen und wir können Lösungen erarbeiten.

*Halb und Halb nutzt Prozentwerte und passt nicht wirklich zur Theorie der anderen Beispiele (ist aber trotzdem potenziell nützlich).