JürgenB: Text neben Bild ausrichten

Hallo,

ich möchte einen Text rechts unten neben einem rechtsbündigem Bild ausrichten:

| (Rand des Inhaltbereichs)
                      |
              ---------
              |       |
              | Bild  |
         Text |       |
         Text ---------
                      |

Das Bild habe ich auch an den rechten Rand bekommen, aber der Text klebt leider am linken Rand. Mein Versuch sieht so aus:

  
<div style="text-align:right">  
<p style="text-align:right;float:left">Abbildung:<br>Text<br>Text<br>Text</p>  
<img src="bild.png" width="134" height="95" border="0" alt="" style="margin-right:0px">  
</div>  

Außerden schwebt der Text in der Höhe mittig zum Bild. Hierzu habe ich noch garkeine Idee.

Hat von Euch jemand eine Idee, wie ich das Problem lösen kann?

Danke und viele Grüße,

Jürgen

  1. hi,

    Das Bild habe ich auch an den rechten Rand bekommen, aber der Text klebt leider am linken Rand.

    Ja, weil du den Textabsatz ohne Breitenangabe nach links gefloatet hast.

    Packe das Bild vor den Textabsatz, floate das Bild nach rechts.

    Außerden schwebt der Text in der Höhe mittig zum Bild. Hierzu habe ich noch garkeine Idee.

    Hebe das floating wieder auf - Container ebenfalls floaten lassen (Breite 100%), oder durch overflow:hidden, oder durch ein noch hinter dem Textabsatz eingfügtes clearendes Element - dadurch bekommt der Container eine Höhe.
    Wenn du jetzt den Container relativ positionierst, kannst du den Textabsatz absolut am bottom des Containers positionieren. Außerdem positionierst du ihn so weit von rechts, wie den Bild breit ist.

    Könnte allerdings bei Schriftgradänderung oder zu viel Text auseinanderfallen.

    Alternative wäre die Elemente per display zu Tabellenelementen zu machen, so dass du vertical-align nutzen kannst - nur da macht leider der IE nicht mit.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hallo wahsaga,

      danke für Deine Hilfe.

      Ja, weil du den Textabsatz ohne Breitenangabe nach links gefloatet hast.

      Stimmt, habe ich vergessen.

      Packe das Bild vor den Textabsatz, floate das Bild nach rechts.

      OK.

      Außerden schwebt der Text in der Höhe mittig zum Bild. Hierzu habe ich noch garkeine Idee.

      Hebe das floating wieder auf - Container ebenfalls floaten lassen (Breite 100%), oder durch overflow:hidden, oder durch ein noch hinter dem Textabsatz eingfügtes clearendes Element - dadurch bekommt der Container eine Höhe.
      Wenn du jetzt den Container relativ positionierst, kannst du den Textabsatz absolut am bottom des Containers positionieren. Außerdem positionierst du ihn so weit von rechts, wie den Bild breit ist.

      Könnte allerdings bei Schriftgradänderung oder zu viel Text auseinanderfallen.

      Uff! Und das soll semantisches Markup sein?

      Alternative wäre die Elemente per display zu Tabellenelementen zu machen, so dass du vertical-align nutzen kannst - nur da macht leider der IE nicht mit.

      Ich glaube, dann löse ich das Problem mit einer Tabelle. Das ist deutlich übersichtlicher als eine positionierte Div-Suppe (Tabelitis gegen Divititis). Außerdem ist der Rest der Seite (noch) im Tabellenlayout, auf eine Tabelle mehr oder weniger kommt es hier wirklich nicht an.

      Danke und Gruß, Jürgen

  2. Hallo,

    ich möchte einen Text rechts unten neben einem rechtsbündigem Bild ausrichten:

    Siehe http://de.selfhtml.org/html/grafiken/ausrichten.htm#css

    div ist veraltet. Aktuell ist jetzt style ;-)

    Gruß Tobias