3 Boxen nebeneinander

[Chris]

Hi,
ich habe drei nebeneinanderliegende Boxen definiert in der nachfolgenden Art (wobei die CSS-Def. ausgelagert werden sollen)

  
  <div style="width:30%; float:left;">  
     Text  
       ......  
     Text  
  </div>  
  <div style="width:30%; float:left;">  
     <img border="0" src="http://www.example.com/b/b1.jpg" alt="">  
  </div>  
  <div style="width:30%; float:left;">  
     Text  
       ......  
     Text  
  </div>  

Wenn ich das Fenster verkleinere, verkleinern sich die linke und die rechte box, nicht aber die mittlere. Irgendwann springt dan die rechte box nach unten.
Wie kann ich das verhindern?
a) Auch mittlere Box soll kleiner werden
   oder
b) Die beiden äußeren Boxen sollen sich schneller verkleinern, damit sie in einer Reihe bleiben
   oder
   ????

[Benjamin Buxbaum]

Hi!

Wenn ich das Fenster verkleinere, verkleinern sich die linke und die rechte box, nicht aber die mittlere. Irgendwann springt dan die rechte box nach unten.

Ich kann das Problem weder im Firefox noch IE reproduzieren. Der Code tut exakt, was er soll: alle divs behalten ihre 30% Breite.
Poste doch mal den kompletten Code, eventuell hast du irgendwo anders einen Fehler eingebaut.

mfG

[Axel Richter]

Hallo,

Ich kann das Problem weder im Firefox noch IE reproduzieren. Der Code tut exakt, was er soll: alle divs behalten ihre 30% Breite.

*g* Ja? Ja, wenn das IMG-Element klein genug ist.
Wie breit ist bei Dir das IMG-Element im mittleren DIV-Element? Und wenn das DIV-Element schmal genug ist, verschmälert sich das IMG-Element dann auch? Wenn es das tut, aus welchem Grund tut es das dann?

viele Grüße

Axel

[Chris]

Hallo,

Wie breit ist bei Dir das IMG-Element im mittleren DIV-Element? Und wenn das DIV-Element schmal genug ist, verschmälert sich das IMG-Element dann auch? Wenn es das tut, aus welchem Grund tut es das dann?

Die Breite des Bildes ist fast 30% der für die drei Boxen zur Verfügung stehenden Breite.
Wenn ich das Div-Element z.B auf 20% verschmälere, bleibt das IMG gleich groß und der Text rechts davon geht in das Bild hinein.
Gruß
Chris

[Axel Richter]

Hallo,

Wie breit ist bei Dir das IMG-Element im mittleren DIV-Element? Und wenn das DIV-Element schmal genug ist, verschmälert sich das IMG-Element dann auch? Wenn es das tut, aus welchem Grund tut es das dann?

Die Breite des Bildes ist fast 30% der für die drei Boxen zur Verfügung stehenden Breite.
Wenn ich das Div-Element z.B auf 20% verschmälere, bleibt das IMG gleich groß und der Text rechts davon geht in das Bild hinein.

Das passiert so in einigen Browsern, je nachdem, wie sie overflow:visible umsetzen. Im IE passiert das, was Du im ersten Posting beschrieben hast:

Wenn ich das Fenster verkleinere, verkleinern sich die linke und die rechte box, nicht aber die mittlere. Irgendwann springt dan die rechte box nach unten.

Wenn das mittlere DIV-Element nicht den vollen Inhalt anzeigen, bzw. sich nicht auf die Breite des IMG-Elements, also seines breitesten Inhalts, ausdehnen soll, kann
entweder
a) das IMG-Element schmaler werden, wenn das DIV-Element schmaler wird. Das kann man erreichen, indem man dem IMG-Element eine Breite von 100% per CSS zuweist. Da sich das IMG-Element im DIV-Element befindet, beziehen sich die 100% auf die Breite des DIV.
oder
b) das DIV-Element nicht mehr den gesamten Inhalt zeigen, wenn es zu schmal dafür geworden ist. Das passiert per overflow:hidden für das DIV-Element.

viele Grüße

Axel

[Chris]

Super Auskunft, danke.
Werde ich sofort versuchen umzusetzen.
Gruß
Chris

[Chris]

Hallo,

Beides funktioniert so, wie Du es beschrieben hast. Aber trotzdem springt bei Verschmälerung des Fensters die rechte Box nach unten.

[Axel Richter]

Hallo,

Beides funktioniert so, wie Du es beschrieben hast. Aber trotzdem springt bei Verschmälerung des Fensters die rechte Box nach unten.

Im IE irgendwann ja. Da musst Du das Fenster aber schon so schmal machen, dass der Text in der rechten Box in längster Wortbreite keinen Platz mehr hat.

Bei den anderen Browsern passiert das nicht.

viele Grüße

Axel

[Benjamin Buxbaum]

Hi!

*g* Ja? Ja, wenn das IMG-Element klein genug ist.
Wie breit ist bei Dir das IMG-Element im mittleren DIV-Element? Und wenn das DIV-Element schmal genug ist, verschmälert sich das IMG-Element dann auch? Wenn es das tut, aus welchem Grund tut es das dann?

Das Bild ist nicht vorhanden, deshalb hatte ich das Problem nicht... ;-) Dass das mittlere Div nicht schmaler als das Bild wird, ist mir auch klar. Allerdings habe ich nicht daran gedacht, dass genau das das Problem des OP sein könnte.

mfG