Probleme mit Layout ohne Tabelle

[Johannes]

Hallo,

ich versuche gerade nur ein Bild von Text umfließen zu lassen und dem ganzen einen Hintergrund zu geben.

<div style="width:200px; background-color:#333333;">

<div style="float:left;">
  <img src="test.gif" alt="" />
</div>

<div>
  test testtest testtest testtest
</div>

</div>

funktioniert aber nur dann, wenn der Text auch wirklich am Ende des Bildes ankommt, sonst nimmt wirklich nur der Hintergund die gewünschte Farbe an, der auch Text beinhaltet.
Das verstehe ich nicht so ganz, schließlich gebe ich nicht den inneren Elementen eine Farbe, sondern dem Element, in dem die beiden anderen liegen.

Wenn ich dem äußeren Element einen Rahmen gebe, dann sehe ich, das das Bild darüber hinaus geht, es überschneidet also das umfassende div.

Dasselbe passiert, wenn ich  wirklich nur das img tag und Text habe und das float:left dem Bild zuweise, oder wenn ich die inneren div-tags durch <p> oder <span> ersetze.

Kann mir jemand bei dem Problem weiterhelfen?

Gruß,

Johannes

[Ashura]

Hallo Johannes.

<div style="[code lang=css]float:left;">
  <img src="test.gif" alt="" />
</div>[/code]

Warum nicht einfach:

<img src="test.gif" alt="" style="[code lang=css]float:left;" />[/code]

Gruß, Ashura

[Johannes]

Hallo,

wie gesagt, das habe ich auch probiert, mit demselben Effekt

Warum nicht einfach:

<img src="test.gif" alt="" style="[code lang=css]float:left;" />[/code]

Gruß,

Johannes

[nag]

Hallo,

mit float nimmst du das Bild aus dem Textfluss. Dadürch wirkt sich die Höhe des Bildes nicht mehr auf die Höhe des umgebenden Div-Containers aus (Elternelement).

Es gibt 2 Lösungen:

1. du beendest float mit der CSS-Eigenschaft "clear"
   http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear
2. du nimmst das Elternelement auch aus dem Textfluss.

mfg NAG

[Johannes]

Hallo,

2. du nimmst das Elternelement auch aus dem Textfluss.

gibt es denn eine andere Möglichkeit den Text um ein Bild fließen zu lassen außer float?

Gruß,

Johannes

[Ingo Turski]

Hi,

gibt es denn eine andere Möglichkeit den Text um ein Bild fließen zu lassen außer float?

nein (auch das HTMl-Attribut align macht nichts anderes). Aber warum sollte es hierfür andere Möglichkeiten geben?

freundliche Grüße
Ingo