Positionierung von 2 Elementen - elegant gelöst

[Philidor]

Hallo miteinander,

ich lasse per JS ein neues Fenster öffnen mit den Maßen...
316 x (abhängig von Bildgröße) Pixel

In dem Window befinden sich 2 Elemente:
ein Image und eine Spalte in der Informationen zum Bild stehen.

Die Bilder sind unterschiedlich groß, haben aber maximal die Höhe von 300 Pixel.
Ist das der Fall soll das Bild links, oben und unten jeweils 8 Pixel vom Rand des Fensters entfernt sein. rechts zwischen Bild und Info-Box soll ein Abstand von 16 Pixel sein.

Die letzte Zeile der Info-Box schließt immer am unteren Rand mit dem Bild ab. Ist das Bild also 300 Pixel hoch, hat die Info-Box unten ebenso einen Rand von 8 Pixel.

Ist ein Bild einmal kleiner als 300 Pixel, so vergrößert sich der Rand oben und unten entsprechend (links bleiben 8 Pixel!), es ist also vertikal zentriert. Die Info-Box soll denselben Abstand nach unten haben, wie das Bild.

Wie lässt sich das realisieren?

Besten Dank

 

[Hache]

ungetestet:
.bild{
padding: 8px 8px 8px 8px;
vertical-align: middle;
}
.info{
padding 8px 8px 8px 8px;
}

 

[kkapsner]

Tabellenlayouts sind zwar nicht so schön, aber ich glaube, das was du machen willst ist ohne genaue Kenntniss der Größenangaben nicht ohne Tabellen möglich - also mir fällt jedenfalls nichts ein.