Ralf: text (links) und grafik (rechts) in <div> ausrichten

Hallo, habe folgendes Problem. Ich habe ein <div> mit gewisser Breite. In diesem Element soll ein Text linksbündig und eine Grafik daneben rechtsbündig ausgerichtet werden.

|TEXT       GRAFIK|

Das ganze soll ohne Tabelle o.ä. erfolgen. Ich komme leider nicht weiter. Sobald ich das Bild rechts ausrichte, rutscht es nach unten weg. Text und Grafik müssen aber vertikal mittig sein. Auch das Attribut "vertical-align: middle" hat nicht viel gebracht, da das Bild dann nicht mehr rechtsbündig ist. VERZWEIFEL!
Hier mein bisheriger Versuch:

<div style="background-color:#A7A7A7; width:150;">Text<img src="images/cliparts/triangle.gif" style="vertical-align: middle; border-style: none; border-width: 0" align="right" width="6" height="8"></div>

Ich hoffe, ihr könnt mir weiterhelfen.

Grüße
Ralf

  1. Im div selbst ein zusätzliches div für das Bild erstellen. Dummerweise funktioniert weder <right></right> nich <span style="text-align:right"></span>

    vita brevis...

  2. Hallo,

    |TEXT       GRAFIK|

    Das ganze soll ohne Tabelle o.ä. erfolgen. Ich komme leider nicht weiter. Sobald ich das Bild rechts ausrichte, rutscht es nach unten weg. Text und Grafik müssen aber vertikal mittig sein. Auch das Attribut "vertical-align: middle" hat nicht viel gebracht, da das Bild dann nicht mehr rechtsbündig ist. VERZWEIFEL!
    Hier mein bisheriger Versuch:

    Am einfachsten geht es immer noch mit einer Tabelle.
    Du kannst auch mit folgendem Code experimentieren.
    ---------
    <div style="border:solid 1px red; float:left; width:80%; height:50%;">
    Das ganze soll ohne Tabelle o.ä. erfolgen. </div>
    <div style="border:solid 1px blue; width:20%; height:50%; float:right; text-align:right;"><img src="libera.gif" width="70" height="22" alt="" border="0"></div>
    -------------
    -------------

    <div style="border:solid 1px red; width:90%;">
    <span style="float:left;">Das ganze soll ohne Tabelle o.ä. erfolgen. </span>
    <div style="margin-top:auto; margin-bottom:auto; clear:both; float:right; border:solid 1px blue;"><img src="libera.gif" width="70" height="22" alt="" border="0"></div>
    </div>
    ---------

    Grüße
    Thomas