2 spaltiges layout ohne float

[Lukas]

Hallo,

ich habe ein Problem das bestimmt jeder schon einmal am Anfang seines CSS-Tums erlebt hat: Ich möchte ein 2-Spaltiges Layout machen.

Das einfache daran: Die Spalten müssen nicht die selbe Höhe haben, sie sollen nur ein DIV welches sich um den beiden Spalten befindet größer machen wenn sie selbst größer sind (also einfach das ganz normale Verhalten dass ein Element in einem anderen nun mal hat).

Das schwierige daran, es soll nicht mit float gemacht werden, da ich einfach schon zu oft das Problem hatte dass "clear"-Elemente innerhalb der spalten sich ungünstig gegenseitig beeinflusst haben. Wobei mir beim schreiben gerade auffällt, das Problem ist doch eigentlich dass ein clear in der einen spalte die floats in der anderen durchbricht, die floats der Spalten selbst aber unbetroffen sind, oder?

Naja, also wenn die floats der Spalten für die clears im content der spalten egal sind hat sich die sache gegessen, also meine frage ist: Ist das denn so? Und wenn nein: Wie kann man ein 2-spaltiges Layout ohne float machen und ohne position:absolute?

Vielen Dank
Lukas

[pinguSTAR]

Hi,

Naja, also wenn die floats der Spalten für die clears im content der spalten egal sind hat sich die sache gegessen, also meine frage ist: Ist das denn so? Und wenn nein: Wie kann man ein 2-spaltiges Layout ohne float machen und ohne position:absolute?

Vielen Dank
Lukas

ich mache das immer mit display:inline ! und dann noch vertical-align:top damit sie oben bündig sind.

Vielen Dank und Beste Grüße
Jan

[suit]

ich mache das immer mit display:inline ! und dann noch vertical-align:top damit sie oben bündig sind.

Wohl eher 'inline-block' und für alte Browser wie den IE6 und den IE7 als Fallback halt 'inline' :)

[Gunnar Bittersmann]

@@suit:

nuqneH

Wohl eher 'inline-block' und für alte Browser wie den IE6 und den IE7 als Fallback halt 'inline' :)

Sag ich doch. ;-)

Qapla'

[Lukas]

Schankedön!

[molily]

Das einfache daran: Die Spalten müssen nicht die selbe Höhe haben, sie sollen nur ein DIV welches sich um den beiden Spalten befindet größer machen wenn sie selbst größer sind

Nichts leichter als das, du lässt die beiden Spalten floaten und gibst dem Container ein Clearfix.
Das ist ein typischer und häufiger Anwendungsfall von Spaltenlayout mit float.

Das schwierige daran, es soll nicht mit float gemacht werden, da ich einfach schon zu oft das Problem hatte dass "clear"-Elemente innerhalb der spalten sich ungünstig gegenseitig beeinflusst haben.

Das tun sie aber nicht, wenn beide Spalten floaten:
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#verschachtelte-spalten ff.

clear wirkt immer nur auf den gegenwärtigen Block Formatting Context. Ein Float erzeugt einen, daher wirkt clear darin nicht auf andere Floats außerhalb.

Wobei mir beim schreiben gerade auffällt, das Problem ist doch eigentlich dass ein clear in der einen spalte die floats in der anderen durchbricht

Wieso sollte es das tun? Siehe oben.

Mathias

[Lukas]

Funktioniert gut, vielen Dank!