Höhe von float Bereichen angleichen ?

[uliII]

Hi,

ein Layout sieht mehrere per float ausgerichtete Bereiche nebeneinander vor.

Die Höhe dieser Bereiche muss immer identisch sein. Problem dabei, die Höhe muss sich auch an den Inhalt anpassen.

Falls also der Inhalt einer dieser Bereiche größer ist als der Nachbar, muss der Nachbar diese Höhe ebenfalls bekommen.

Lässt sich das per css lösen?

LG uli

[dave]

Hi,

Lässt sich das per css lösen?

Nicht mittels float.
Das Flex-Box-Model könnte eine Lösung sein, oder Faux-Columns.

~dave

[dave]

Das Flex-Box-Model könnte eine Lösung sein, oder Faux-Columns

… oder display: table-cell;

[misterunknown]

Moin,

… oder display: table-cell;

Gunnar würde jetzt sagen: Egal ob <table> oder display:table, Tabellen sind nicht zum Layouten da.

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

… oder display: table-cell;

Gunnar würde jetzt sagen: Egal ob <table> oder display:table, Tabellen sind nicht zum Layouten da.

display:table-... sind dafür da, etwas, was keine Tabelle ist, wie eine Tabelle aussehen zu lassen.

Matthias

[Schuer]

Lässt sich das per css lösen?

Mittels table layout, ja. Dann aber ohne die Unterstützung betagter IEs.

Cross-Browser-kompatibel mittels JS: http://css-tricks.com/equal-height-blocks-in-rows/.

Viele Grüße
_Dirk

[Smart]

Hallo,

ein Layout sieht mehrere per float ausgerichtete Bereiche nebeneinander vor.

Die Höhe dieser Bereiche muss immer identisch sein. Problem dabei, die Höhe muss sich auch an den Inhalt anpassen.

Auch, wenn ich mich hier oute: Die gute alte Tabelle ist eine Option. Denn mehrere floatende div durchdringen sich. Gib denen einfach mal einen border, dann sieht man es.

Mit bestimmten Tags gibt's Ärger, etwa mit <ul> oder <ol> und <li>, deren Aufzählungszeichen aus dem floatenden div wandern.

Ich nutze floatende divs, damit sie bei schmalem Viewport untereinander stehen, aber dann wäre die Forderung "alle müssen gleich hoch sein" unsinnig.

Daraus schließe ich, dass bei dir ein Floaten gar nicht notwendig ist.

Smart

[Matthias Apsel]

Om nah hoo pez nyeetz, Smart!

Auch, wenn ich mich hier oute: Die gute alte Tabelle ist eine Option.

genau. Und zwar für moderne Browser mittels display: table-... wie schon geschrieben.

Ich nutze floatende divs, damit sie bei schmalem Viewport untereinander stehen, aber dann wäre die Forderung "alle müssen gleich hoch sein" unsinnig.

Daraus schließe ich, dass bei dir ein Floaten gar nicht notwendig ist.

Im Forumsarchiv gibt es auch eine JS-Lösung, bei der Elemente mit sehr unterschiedlichen Abmessungen sehr platzsparend (besser als mit float) untergebracht wurden. Das hat aber a) mit dem ursprünglichen Problem nichts zu tun und b) habe ich das Posting auf die Schnelle nicht gefunden.

Matthias

[misterunknown]

Moin,

Lässt sich das per css lösen?

Selfhtml Artikel: CSS Layouts # Gleich lange Spalten

Grüße Marco