Dennis (unauthentifiziert): Umbruch von Objekten innerhalb von DIV verhindern

Moin!

Folgendes Problem:
Ich gestallte eine Seite mit alten Kameraprospekten. Dazu packe ich ein Bild mit einem kurzen Text in einen Container, und zwar so, dass der Text rechts oben neben dem Bild steht. Die einzelnen Container lasse ich links floaten, so dass sie bis zum Fensterende nebeneinandergereiht werden, und dann in eine neue Zeile umbrechen. Mein Problem ist nun innerhalb des "rechtesten" Containers einen Umbruch zu verhidern, dass also der Text unter das Bild rutscht, bevor der ganze Container in die neue Zeile rutscht. Momentan behelfe ich mir damit, dass ich eine zweispaltige Tabelle als Container verwende:

<table id="container">
<tbody>
<tr>
<td id="bild"><img src="...">
</td>
<td id="text"><p>...</p>
</td>
</tr>
</tbody>
</table>

In der CSS-Datei ist der Container so definiert:

#container {
float:left;
border: 1px solid #CFCFCF;
margin: 10px 10px 0 0;
background-color: #eee;
}

Hier die ganze Seite:
http://minolta.eazypix.de/promo/cameras/div

Ich würde das gerne ohne TABLE machen, also Bild und Text in einen DIV-Container packen. Wie zwinge ich den Text rechts neben das Bild, und verhindere, dass er unters Bild rutscht?

Vielen Dank für alle Tipps,
viele Grüße,
Dennis.

  1. hi,

    Wie zwinge ich den Text rechts neben das Bild, und verhindere, dass er unters Bild rutscht?

    Warum gibst du nicht dem Container eine (Mindest-)Breite, so dass der Text neben dem Bild noch Platz findet?

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Warum gibst du nicht dem Container eine (Mindest-)Breite, so dass der Text neben dem Bild noch Platz findet?

      Weil erstens der IE min-width großzügig ignoriert, und zweitens die Bilder eine einheitliche Höhe, aber keine einheitliche Breite haben. Ich will aber,  - der Einheitlichkeit halber ;-) - dass der Text immer gleich breit ist. Im "text"-Attribut habe ich ja auch eine min-width definiert:

      #text {
      padding: 10px 10px 10px 0;
      width: 8em;
      min-width:8em;
      vertical-align:top;
      }

      Allerdings hält sich IE nicht dran, FF schon. Außerdem siehst Du hier auch noch das dritte Problem: Ich verwende "em" für die Textbreite. Das Bild ist aber logischerweise in "px" angegeben. Für den ganzen Container müsste ich mich für eines von beiden entscheiden - was ich definitiv nicht will.

      Trotzdem Danke für die Antwort,
      Gruß, Dennis.