Olli: Variable Bildbreite und Float

Beitrag lesen

Hallo zusammen,

mal keine Frage, sondern ein Ergebnis, das vielleicht jemanden hilft:

Ich wollte in einem flexiblen Layout ein Bildmotiv in der Breite der Breite des Inhalstbereichs anpassen. Dazu legte ich das Bild als Hintergrundgrafik in ein div und gab dem div noch die gewünschte Höhe:

<div style="background:url('mein_bild.jpg') no-repeat 0 0;height:150px;"></div>

Jetzt ist das Bild immer von Links bis zur Breite des umgebenden Containers zu sehen (das Bild sollte dafür sehr breit sein).

Manchmal möchte man noch einen Text um das Bild fließen lassen. Dafür muß angegeben werden, wieviel Prozent der zur Verfügung stehenden Breite das Bild und wieviel der Text einnehemen und evtl. noch einen Abstand zum Text bestimmen:

<div style="background:url('mein_bild.jpg') no-repeat 0 0;height:150px;width:50%;float:left;margin-right:8px"></div>
<p>viel Text</p>