zweispaltig - flexibel - problem

[erik]

ich möchte ein einfaches zweispalten Layout umsetzen. Meine Anforderungen sind:

1. beide Spalten sollen flexibel sein (hab ich mit Prozent-breiten umgesetzt)
2. nicht unter eine gewisse Breite verkleinerbar sein (hab ich momentan mit min-width im body gelöst)

3. das Design erfordert es allerdings, dass diese zwei Spalten den gesamten viewport ausfüllen (zumindest optisch). Bei Seiten mit wenig Inhalt passiert aber nun folgendes:
   beim verkleinern der Fensterbreite wandert das Hintergrundbild des bodys (war als faux-column gedacht) mit. Dh: ist die fensterbreite kleiner der min-width bricht das Layout.
   Ist eigentlich klar denn das Hintergrundbild ist ja mit 35% (der linken Spaltenbreite) am Viewport ausgerichtet.
   Gibts dafür ne Lösung? Alles was ich ergoogelt habe bezog sich auf den Content (One True Layout, Equal Height Columns, etc...) - nicht aber auf ein gesamtdesign.

Vielleicht hat ja schonmal jemand sowas gemacht. Meine versuche mit absoluter Positionierung waren bisher auch erfolglos (hatte überlegt einen HG-Bild bereich am bottom auszurichten und mit z-index hinter den Rest zu legen...)
Der einzige Weg, wie ich bisher den Layout-Zerschuss stoppen konnte war y-overflow: hidden wobei natürlich der Inhalt u.U. unreachable wird... also auch nicht so der knüller...

Link: Problemseite(bitte nicht wegen IE jammern - der muss erst noch... :/ )

[Gernot Back]

Hallo erik,

3. das Design erfordert es allerdings, dass diese zwei Spalten den gesamten viewport ausfüllen (zumindest optisch). Bei Seiten mit wenig Inhalt passiert aber nun folgendes:
   beim verkleinern der Fensterbreite wandert das Hintergrundbild des bodys (war als faux-column gedacht) mit. Dh: ist die fensterbreite kleiner der min-width bricht das Layout.

Link: [link:http://www.contactsheet.de/lightpress/@title=Problemseite

Ich habe dein Problem im Firefox tatsächlich erst nachvollziehen können, als ich mit extrem kleiner Schriftgröße dafür sorgte, dass "wenig" Inhalt in der rechten Spalte war.

Wenn es also daran hängt, dann sorge du doch ebenfalls mit min-height:100% in der betreffenden Spalte dafür, dass dieser Fall niemals eintreten kann.

Da du dann dem BODY- und dem HTML-Element ebenfalls 100% Höhe geben musst, solltest du mit background-attachment:fixed auch noch Vorkehrungen treffen, dass das Hintergrundbild stehen bleibt und nicht nach oben verschwindet, wenn man darüber hinaus nach unten scrollt.

Gruß Gernot

[erik]

Sehr geil, Gernot! :-D

Das hat es tatsächlich schon gebracht. Da bin ich doch happy... Danke!