div in floating div

[Patrick W.]

Hallo,

ich habe einen rechts-floating div, der 4 andere divs enthält. Von diesen 4 divs sind 3 in ihrem Inhalt konstant, also könnten eine feste Breite haben; der 4. div ist in seinem Inhalt dynamisch, nach seinem Inhalt sollen sich alle anderen divs vergrößern.

Schematisch sieht das ganze so aus:

  
<div style="float: right;>  
 <div></div>  
 <div></div>  
 <div></div>  
 <div>dynamisch</div>  
</div>  

Nun sollte es ja so sein, dass die inneren divs sich auf 100% des äußeren div vergrößern sollten; dieser jedoch sollte seine Größe nach dem Inhalt festlegen, in diesem Fall also dem 4. div.
Das ganze klappt im Firefox (und auch Opera) wunderbar, jedoch wird bei allen IEs der floating div auf 100% des übergeordneten Elements vergrößert, wodurch alle ersten 3 inneren ebenfalls auf 100% gehen. Von einem floating ist dann nichts mehr zu sehen und das ganze hat den Sinn verfehlt.
Wie kann man dem IE nun beibringen, den äußeren div nur auf den nötigen Platz zu vergrößern?

Gruß
Patrick W.

[Steel]

Hi,

indem du ihm eine min min-width, bzw. fuer den MSIE ne width verpasst. Zur not Regelst Du das mit einem overflow noch nach.

Falls ich da was falsch verstadnen habe, dann gib doch bitte mal mehr Beispiel.

[Patrick W.]

Hallo Steel,

Falls ich da was falsch verstadnen habe, dann gib doch bitte mal mehr Beispiel.

am besten gebe ich euch einmal den Link zu der Seite direkt. Und zwar handelt es sich um eine WikiMedia Seite (weswegen css auch nur über style attribute möglich ist). Im Firefox wird das ganze korrekt dargestellt, die 3 Boxen über der "Table Of Contents" werden in gleicher Breite wie die TOC selber angezeigt, die TOC wiederum hat eine vom Inhalt abhängige Größe; da ich nicht weiß, wie lang manche einen neuen Diskussionstitle erstellen, kann ich nicht pauschal eine Größe eingeben. Außerdem kann man der TOC selber keine Größe zuweisen (sie ist immer so groß, wie sie sein muss).
Im IE, wie gesagt, wird das ganze auf 100% Breite gezogen, die TOC darunter zentriert (mit ihrer eigenen Größe).
Ich möchte nun irgendwie dem IE sagen, dass er das floating div nur so groß macht, wie die TOC ist, die 3 divs allerdings auf maximaler Breite des floating divs lassen.

Hier der Link: http://wiki.guildwars.com/wiki/User_talk:Poke

[Steel]

Hi,

Hm. Einen Link schau ich mir grad lieber nicht an (Mein Arbeitgeber ist bestimmt nicht erbaut, wenn ich ne MMO Seite anschaue). Sollte ich spaeter zuhause noch dran denke (leider eher unwahrscheinlich), kann ich mir ja mal anschauen was da abgeht.

[Patrick W.]

Hallo,

als ich soeben versuchte, das ganze - möglichst minimiert - in einer Datei nachzubauen (um es dir hier zu posten), ist mir die Lösung aufgefallen.
Als ich das ganze sinnbildlich kopiert hatte, und es auch im IE richtig lief, war ich recht erstaunt, also suchte ich nach einem Unterschied. Dabei fiel mir auf, dass ich im ersten der inneren divs eine horizontale Linie eingefügt hatte.
Nehm ich diese nun weg, so wird alles korrekt dargestellt. Offensichtlich streckt sich die <hr> also über den gesamten Bildschirm.
Gibt es eine Möglichkeit, der hr beizubringen, sich in der Breite wie ein div zu verhalten (also auf die maximale Breite gehen, ohne den übergeordneteten Container zu vergrößern) oder soll ich eine horizontale Linie mit einem div simulieren?

Gruß
Patrick

Hi,

Hm. Einen Link schau ich mir grad lieber nicht an (Mein Arbeitgeber ist bestimmt nicht erbaut, wenn ich ne MMO Seite anschaue). Sollte ich spaeter zuhause noch dran denke (leider eher unwahrscheinlich), kann ich mir ja mal anschauen was da abgeht.

[Steel]

Hi

interessante Frage. Das Problem hat sich mir noch nie gestellt... Versuch der der lieben Linie mal ein width:100%  zu geben. Auch wenn ich nicht an einen Erfolg glaube.

Ansonsten musst Du die Breite der Linie halt irgendwie beschraenken und darauf verzichten, dass sie 100% Divbreite hat.