Variable Anzahl von Elementen nebeneinander, abhängig von Platz

[dave]

Hi,

ich habe ein Element, welches eine beliebige Breite zwischen 200 und 600 Pixel haben kann.
Darin sind zwei Elemente die Detailinformationen enthalten.
Diese sollen gleich breit sein, mindestens 200px und maximal 300px.

Nun soll der zur Verfügung stehende Platz komplett ausgefüllt werden.

Falls also das übergeordnete Element 200px breit ist sind die Detail-Elemente auch jeweils 200px breit und kommen untereinander.
Bei 300px genauso nur eben mit 300px Breite.
Wenn das übergeordnete Element 400px breit ist sollen zwei Detail-Elemente nebeneinander sein und jeweils 200px Breite haben.
Bis zu 600px, wo die Detail-Elemente dann 300px breit sind.

Ich habe keine Ahnung ob so etwas ohne JS möglich ist.
Mir wären auch proprietäre Lösungsansätze recht (eventuell flexible box model?), Browser egal. (nicht IE<8)

Verständlich was ich erreichen möchte?

Code oder Online-Beispiel habe ich nicht, da mir jeglicher Ansatz fehlt…

~dave

[Gunnar Bittersmann]

@@dave:

nuqneH

Diese sollen gleich breit sein, mindestens 200px und maximal 300px.
Nun soll der zur Verfügung stehende Platz komplett ausgefüllt werden.

Deine Anforderungen widersprechen sich, wenn der Container eine Breite zwischen 301px und 399px hat.

Wenn du deine Anforderungen etwas runterschraubst, tut es { float: left; min-width: 200px; width: 50% } für die inneren Elemente. Nur dass zwischen 201px und 300px Containerbreite nicht der Platz komplett ausgefüllt wird. (Zwischen 301px und 399px auch nicht, aber da sind ja die Anforderungen unklar.)

Qapla'

[dave]

Hi,

Diese sollen gleich breit sein, mindestens 200px und maximal 300px.
Nun soll der zur Verfügung stehende Platz komplett ausgefüllt werden.

Deine Anforderungen widersprechen sich, wenn der Container eine Breite zwischen 301px und 399px hat.

Da hast du Recht. Dann eben mindestens 150px breit :-P

Wenn du deine Anforderungen etwas runterschraubst, tut es { float: left; min-width: 200px; width: 50% } für die inneren Elemente. Nur dass zwischen 201px und 300px Containerbreite nicht der Platz komplett ausgefüllt wird. (Zwischen 301px und 399px auch nicht, aber da sind ja die Anforderungen unklar.)

Mein Hauptziel ist eigentlich dass immer der komplette Platz ausgefüllt ist, nur eben wenn genug Platz ist die beiden Elemente nebeneinander sind.
Deshalb gefällt mir dein Lösungsvorschlag nicht so.

~dave

[Gunnar Bittersmann]

@@dave:

nuqneH

ich habe ein Element, welches eine beliebige Breite zwischen 200 und 600 Pixel haben kann.

Wo kriegt das seine Breite her? Lässt sich diese Information auf die zwei Elemente darin übertragen?

Qapla'

[dave]

Hi,

Wo kriegt das seine Breite her? Lässt sich diese Information auf die zwei Elemente darin übertragen?

Der Anwender kann die Breite dieses Elements festlegen.

~dave

[Gunnar Bittersmann]

@@dave:

nuqneH

Der Anwender kann die Breite dieses Elements festlegen.

Und wie äußert sich das im HTML-Quelltext?

Qapla'

[dave]

Hi,

Der Anwender kann die Breite dieses Elements festlegen.

Und wie äußert sich das im HTML-Quelltext?

Durch ein style="width:Xpx;".

~dave

[Gunnar Bittersmann]

@@dave:

nuqneH

Der Anwender kann die Breite dieses Elements festlegen.

Und wie äußert sich das im HTML-Quelltext?

Durch ein style="width:Xpx;".

Wenn X immer dreistellig ist, kannst du Substring-matching-Attributselektor und Kindkombinator verwenden:

foo[style^="width:4"]>bar,  
foo[style^="width:5"]>bar,  
foo[style^="width:6"]>bar  
{  
  float: left;  
  width: 50%;  
}

Qapla'