Floaten bei variabler Breite

[janne]

Hi alle,

ich benötige im Inhaltsbereich eines Seitentemplates zwei Container, die nebeneinander floaten sollen. Der Inhalt des rechten Behälters kann auf verschiedenen Seiten unterschiedlich breit sein, der linke soll dann jeweils die übriggebliebene Breite einnehmen.

Also z.B. auf einer Seite so:

AAAAAAAAA BBB
AAAAAAAAA BBB
AAAAAAAAA BBB
          BBB

... und auf einer anderen so:

AAAAA BBBBBBB
AAAAA BBBBBBB
AAAAA BBBBBBB
AAAAA
AAAAA

Hat jemand einen Tipp für mich, wie man das CSS dazu aufbaut? Wenn ich A und B zu <div>s mache und B "float:right" gebe, dann setzt sich A unter B nicht daneben, weil es die volle Breite haben will (B steht im HTML vor A). Wenn ich A nicht in ein <div> packe, fließt dessen Inhalt im zweiten Beispiel um B herum, was ich nicht will:

AAAAA BBBBBBB
AAAAA BBBBBBB
AAAAA BBBBBBB
AAAAA
AAAAAAAAAAAAA

Mit einer Tabelle wäre das natürlich weniger kompliziert, aber wer will schon ein Tabellenlayout :-)

Gruß,

janne

[1UnitedPower]

Wie wäre es mit display: inline-block;

[janne]

Hab ich auch schon probiert, aber das hilft nix: Wenn der Inhalt von A breiter ist als die von B übriggelassene Seitenbreite, dann setzt sich A unter B, nicht daneben. Statt ...

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA BBBBBB
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

... sehe ich dann ...

BBBBBB

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

Das wäre leichter, wenn der Inhalt von B auf allen Seiten die gleiche Breite hätte. Dann müsste A einfach diese Breite als rechten margin bekommen und müsste überhaupt nicht floaten. Aber ich bräuchte eine Lösung, bei der A automatisch die Breite nutzt, die B übriglässt.

janne

[Matthias Apsel]

Om nah hoo pez nyeetz, janne!

Wenn ich A und B zu <div>s mache

Neien!! 1. Kann man jedes beliebige Element stylen und 2. sollen die Elemente beschreiben, was drin ist, etwa ein Absatz, eine Überschrift, ...

Aber ich bräuchte eine Lösung, bei der A automatisch die Breite nutzt, die B übriglässt.

Wie bekommt B seine Breite?

Kannst du die Seite zeigen?

Matthias

[janne]

Hi Matthias!

Neien!! 1. Kann man jedes beliebige Element stylen und 2. sollen die Elemente beschreiben, was drin ist, etwa ein Absatz, eine Überschrift, ...

War doch nur ein Beispiel, geht natürlich mit jedem Behälter mit display:block.

Kannst du die Seite zeigen?

Nehmen wir dieses Beispiel:

<div style="float: right; background-color: red; width: 200px;">Dieser Behälter kann auf jeder Seite eine andere, feste Breite haben</div>  
<div style="float: left; background-color: green;">Der Inhalt dieses Behälters soll die Breite nutzen, die der andere übriglässt, soll diesen aber nicht umfließen.</div>

... das funktioniert, solange der Inhalt des linken Containers nur eine Zeile hoch gerendert wird. Sobald er aber länger wird, setzt sich der linke floater unter den rechten:

<div style="float: right; background-color: red; width: 200px;">Dieser Behälter kann auf jeder Seite eine andere, feste Breite haben</div>  
<div style="float: left; background-color: green;">Der Inhalt dieses Behälters soll die Breite nutzen, die der andere übriglässt, soll diesen aber nicht umfließen. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>

display:inline-block statt float hilft dagegen leider auch nicht:

<div style="display: inline-block; background-color: green;">Der Inhalt dieses Behälters soll die Breite nutzen, die der andere übriglässt, soll diesen aber nicht umfließen. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>  
<div style="display: inline-block; background-color: red; width: 200px;">Dieser Behälter kann auf jeder Seite eine andere, feste Breite haben</div>

Danke für Deine Hilfe!

janne

[Matthias Apsel]

Om nah hoo pez nyeetz, janne!

Du beantwortest meine Frage nicht:

Für B kannst du per Hand eine feste Breite setzen, für A aber keinen entsprechenden margin? Dann hast du deine Lösung dir schon vorgegeben.

Eine zweite Lösungsvariante ist flexbox.

Matthias

[janne]

Es handelt sich um ein Template für ein CMS. Die Inhalte der beiden Container -- und daraus ergibt sich die Breite von B -- geben die Redakteure ein. Deshalb bräuchte ich eine Lösung, bei der das Layout flexibel reagiert und keine festen Breiten-/Margin-Angaben im CSS erfordert.

Flexbox kommt nicht in Frage, da ist die Browserunterstützung noch zu gering.
» http://caniuse.com/flexbox

janne

[dave]

Hi,

gib B ein float: right und sorge dafür das A einen block formatting context erzeugt.

~dave