fluide zwei spalten

[heinrich]

Hallo Selfer,

ich möchte ein fluides liquides zweispaltiges Layout.

Zuerst die rechte Spalte im HTML:
float: right;

Danach die Linke Spalte im HTML:
width: 70%;
min-width: 20em;

Soweit so gut, Spalten werden nebeneinander angezeigt. Beim unterschreiten der 20em wird die linke Spalte unter der rechten angezeigt.

Nun sollen die Spalten gleich lang und durchgehend sein, also dachte ich an hasLayout und verpasste den divs overflow: hidden. Dadurch wurden die Spalten gleich lang, jedoch ging der Effekt verloren, dass die Spalten bei Bedarf untereinander angezeigt werden.
Anstatt dessen schieben sich die Divs jetzt einfach übereinander.

Gibt es eine Möglichkeit, dass auch gleich lange Spalten, also mit hasLayout, untereinander angezeigt werden, wenn die min-width unterschritten wird?
Oder muss ich mich entscheiden zwischen durchgehenden Spalten oder sinnvoller Nutzung von min-width?

Grüße

[Beat]

ich möchte ein fluides liquides zweispaltiges Layout.

Gibt es eine Möglichkeit, dass auch gleich lange Spalten, also mit hasLayout, untereinander angezeigt werden, wenn die min-width unterschritten wird?
Oder muss ich mich entscheiden zwischen durchgehenden Spalten oder sinnvoller Nutzung von min-width?

Mein Tipp:

Ohne JS:
verzichte auf Spalten

Mit JS;

• messe den verfügbaren Raum aus und setze die Klassen,
• durch welche dein gewünschtes Layout für jede Situation angezeigt wird.

Berücksichtige, dass heute nebst float noch inline-block als anderes Layout-Instrument besteht.

mfg Beat

[heinrich]

Ohne JavaScript keine fluiden durchgehenden Spalten?

Dann wohl lieber gefloatete Bereiche ohne durchgehende Spalte mit CSS, die das gewünschte Verhalten zeigen.

Schade eigtl...

[Gunther]

Hallo!

ich möchte ein fluides liquides zweispaltiges Layout.

Wie liquide ist dein Layout denn? ;-) *SCNR*

Zuerst die rechte Spalte im HTML:
float: right;

Danach die Linke Spalte im HTML:
width: 70%;
min-width: 20em;

Soweit so gut, Spalten werden nebeneinander angezeigt. Beim unterschreiten der 20em wird die linke Spalte unter der rechten angezeigt.

Was ich bis hierhin schon nicht verstehe ist:

• Sind die beiden Spalten nicht in einen Wrapper eingeschlossen?
• Die rechte Spalte hat keine min-width, bzw. der umgebende Wrapper?

Nun sollen die Spalten gleich lang und durchgehend sein, also dachte ich an hasLayout und verpasste den divs overflow: hidden. Dadurch wurden die Spalten gleich lang, jedoch ging der Effekt verloren, dass die Spalten bei Bedarf untereinander angezeigt werden.

Das Mittel ist zwar "korrekt", aber deine Interpretation imo nicht.
hasLayout ist eine proprietäre IE/Win Eigenschaft.
Wovon du sprichst, nennt sich "Block Formatting Context". Einer der besten Artikel zu diesem Thema findest du unter http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

Anstatt dessen schieben sich die Divs jetzt einfach übereinander.

Ein Link zu einem Online-Beispiel oder zumindest auszugsweise dein HTML und CSS Code wären an dieser Stelle sicher hilfreich.

Gibt es eine Möglichkeit, dass auch gleich lange Spalten, also mit hasLayout, untereinander angezeigt werden, wenn die min-width unterschritten wird?

Nein, das kann doch schon rein von der Logik her nicht hinhauen. "Gleich lang" macht doch nur Sinn für Spalten, die sich nebeneinander befinden. Genaugenommen kann man bei untereinander ja gar nicht mehr von Spalten reden, sondern eher von "Blöcken".

Oder muss ich mich entscheiden zwischen durchgehenden Spalten oder sinnvoller Nutzung von min-width?

Wenn bei gleichem Stylesheet auch der Fall abgedeckt sein soll, dass der Viewport so schmal werden kann, ohne dass die Seite horizontal aus diesem "herausragt", dann dürfte es imho sehr schwer werden, den gewünschten Effekt rein mit CSS zu erreichen.

Allerdings bin ich der Meinung, dass man für das Screen-Layout heutzutage durchaus eine Mindestbreite von 800px annehmen darf. Und wenn man weiter davon ausgeht, dass die Standard-Schriftgröße bei den allermeisten Usern 16px beträgt, dann hat deine linke Spalte eine min-width von 320px. Blieben für die rechte Spalte also immerhin noch ganze 480px übrig.

Mir scheint es eher so, als ob du eine Seite (auch) für Handys basteln willst.
Wenn dem so ist, solltest du dein Vorhaben nochmal etwas genauer schildern.

Gruß Gunther

[heinrich]

Hallo,

Was ich bis hierhin schon nicht verstehe ist:

• Sind die beiden Spalten nicht in einen Wrapper eingeschlossen?
• Die rechte Spalte hat keine min-width, bzw. der umgebende Wrapper?

Doch die Spalten sind in einem Container.
div#container {
min-width: 25em;
width: 90%;
}
div#right {
float: right;
}
fiv#left {
min-width: 20em;
width: 70%;
}

Die Breite der rechten Spalte soll sich nach den Inhalten in ihr richten, konnte mich zu keiner sinnvollen Breitenangabe durchringen.

In der Linken Spalte ist Textinhalt. In der Rechten sollen so Sachen wie Navigation, Login, Abstimmungen etc. eben innerhalb des Containers so weit wie nötig in die übrigen 10% ragen.

Nein, das kann doch schon rein von der Logik her nicht hinhauen. "Gleich lang" macht doch nur Sinn für Spalten, die sich nebeneinander befinden. Genaugenommen kann man bei untereinander ja gar nicht mehr von Spalten reden, sondern eher von "Blöcken".

Naja, gleich lang. Wie soll ich sagen? Die Spalten sollen praktisch über die ganze Seite gleich breit sein und sich nicht wie einem einfachen Float wieder ausbreiten, sobald wieder Platz ist. In dem Sinne gleich lang über die ganze Seite erstreckt die Spalte, sofern der Platz eben reicht.
Reicht der Platz nicht, in Blöcken untereinander.

»» Oder muss ich mich entscheiden zwischen durchgehenden Spalten oder sinnvoller Nutzung von min-width?
Wenn bei gleichem Stylesheet auch der Fall abgedeckt sein soll, dass der Viewport so schmal werden kann, ohne dass die Seite horizontal aus diesem "herausragt", dann dürfte es imho sehr schwer werden, den gewünschten Effekt rein mit CSS zu erreichen.

sehr schwer = unmöglich?

Allerdings bin ich der Meinung, dass man für das Screen-Layout heutzutage durchaus eine Mindestbreite von 800px annehmen darf. Und wenn man weiter davon ausgeht, dass die Standard-Schriftgröße bei den allermeisten Usern 16px beträgt, dann hat deine linke Spalte eine min-width von 320px. Blieben für die rechte Spalte also immerhin noch ganze 480px übrig.

Mir scheint es eher so, als ob du eine Seite (auch) für Handys basteln willst.

Naja nicht für ein Handy, aber ich wollte mal ein absolut fluides Layout nach Ideologie und Philosophie korrekt umsetzten versuchen...

Vermutlich wird nie jemand einen so schmalen Viewport haben, dass ich nicht einfach overflow: hidden verwenden und mich über 2 Spalten freuen könnte, aber prinzipiell muss es ja gehen...

Grüße