Dynamische Breite von floatenden Blockelementen?

[Ralf Heumann]

Hallo, ich möchte folgendes Layout ohne Tabellen umsetzen:

http://www.janus-wa.de/layouts/cah-med/angebote.gif

Dabei möchte ich, dass sich die 3 Spalten je nach vorhandenem Platz in der Breite verändern. Sprich wird der Platz breiter, so verteilt sich der vorhandene Platz gleichmäßig auf alle 3 Spalten (liquid).

Ich dachte zunächst daran jede Spalte in ein "<li>" zu setzen wobei jede Spalte die Eigenschaft float:left; bekommt, damit sie nebeneinanderstehen (oder mit display: inline;). Das Problem ist jedoch dann, dass sich die <li>s nur noch an ihren Inhalt anpassen.

Ich möchte außerdem beachten, dass das ganze auch noch funktioniert, wenn eine oder 2 Spalten wegfallen (ergo: 50% : 50% bzw. 100% Verteilung).

Mit einer Tabelle wäre das am einfachsten lösbar, aber darauf möchte ich verzichten, ist es mit CSS möglich, dass sich die Breite nebeneinanderfloatender Blockelemente je nach vorhandenem Platz verändert?

Viele Grüße und danke,

Ralf

[D.R.]

Hi,

Hallo, ich möchte folgendes Layout ohne Tabellen umsetzen:

http://www.janus-wa.de/layouts/cah-med/angebote.gif

Dabei möchte ich, dass sich die 3 Spalten je nach vorhandenem Platz in der Breite verändern. Sprich wird der Platz breiter, so verteilt sich der vorhandene Platz gleichmäßig auf alle 3 Spalten (liquid).

Nimm jeweils ca. 30% für jede Spalte und gib ihnen float:left. Zusätzlich brauchst du noch ein clearendes Element, das du als letzes Einfügst z.B. <div style="clear:left"></div>.

Ich dachte zunächst daran jede Spalte in ein "<li>" zu setzen wobei jede Spalte die Eigenschaft float:left; bekommt, damit sie nebeneinanderstehen (oder mit display: inline;). Das Problem ist jedoch dann, dass sich die <li>s nur noch an ihren Inhalt anpassen.

Nein, ich würde die Blockeigenschaften schon beibehalten.

Ich möchte außerdem beachten, dass das ganze auch noch funktioniert, wenn eine oder 2 Spalten wegfallen (ergo: 50% : 50% bzw. 100% Verteilung).

Dann müsstest du mehrere Klassen (für's übergeordnete Element) definieren.

Mit einer Tabelle wäre das am einfachsten lösbar, aber darauf möchte ich verzichten, ist es mit CSS möglich, dass sich die Breite nebeneinanderfloatender Blockelemente je nach vorhandenem Platz verändert?

Nein, nicht wirklich. Du solltest aber auch beachten: Tabellen sind nicht immer falsch. Sofern es sich um tabellarische Daten handelt, sind sie durchaus angebracht. Und ich würde es schon bald als tabellarische Daten einschätzen.

Einen schönen Donnerstag noch!

[Ingo Turski]

Hi,

ist es mit CSS möglich, dass sich die Breite nebeneinanderfloatender Blockelemente je nach vorhandenem Platz verändert?

Nein. Floatende Elemente nehmen, wenn keine Breite angegeben ist, nach CSS 2.1 die Breite ein, die deren Inhalt erfordert. Automatisch geht also nicht, es sei denn, Du definierst die Breiten dynamisch entsprechend der Anzahl der Elemente.
Was Du suchst, ist eine typische Tabelleneigenschaft, und CSS bietet hierzu sogar eine display-Eiggenschaft an, die jedoch ein bekannter Browser nicht unterstützt.

freundliche Grüße
Ingo