Wolfgang: vertical-align in <div>

Beitrag lesen

Hallo alle zusammen,

zu allererst entschuldigt bitte, wenn das Thema total ausgelutscht ist. Mich bringt es aber zum Wahnsinn.

Folgendes Problem habe ich, bzw. so soll es aussehen:

|-------------------------------------------------|
 |                                  -------------- |
 | Über-                            |            | |
 | schrift                          |            | |
 |                                  |            | |
 |                                  |  [Bild]    | |
 |                                  |            | |
 |                                  |            | |
 |                                  |            | |
 | weiterer Text                    |            | |
 | aber unten                       |------------| |
 --------------------------------------------------|

In HTML so

<div class="problem-box">
  <img bekannteGroesseUndHoehe />
  <h1>Überschrift, die unterschiedlich viele Zeilen haben kann</h1>
  <p>Fließtext, der unterschiedlich viele Zeilen haben kann</p>
</div>

In der div-Box ist eine Überschrift, die oben links sein soll (kein Problem). Rechts soll ein Bild mit bekannter Größe sein (kann man ja einfach nach rechts floaten). Der div-Container ist so hoch wie das Bild.
Zwisen der Überschrift und dem Fließtext ist ein dynamischer Abstand. Der Fließtext soll nämlich immer unten mit dem Bild abschließen. Dies habe ich mit vertical-align probiert.

Dies hat allerdings nicht funktioniert. Auch der Webhack http://www.jakpsatweb.cz/css/css-vertical-center-solution.html hat mir nicht wirklich geholfen (bei meinem Problem).

Kann mir da jemand eine elegante Lösung nennen, die am besten auch noch weitmöglichst für die meisten Browser funktioniert? :-)

Vielen Dank schon mal
und die besten Grüße,
Wolfgang