Layout: responsive Alternative zu einem Table

    Wie kann ich am Besten in einem Artikel ein Layout erstellen, das gleich Große Boxen hat.
    Bild ist 450px x 450px neben dem Bild ist wenig Text, dieser sollte jedoch in einer Box mit der gleichen Größe wie das Bild sein - damit es gut aussieht.
    Mit einem Table bekomme ich das gut hin: http://sample4.ganserdesign.com/index.php/en/alserstrasse


    Aber ohne weiß ich nicht wie es am Besten geht.
    Ich habe es mit css3 Columns versucht, aber die haben auch keine "fixed height" für den Text zugelassen.
    Welche Ideen gibt es das umzusetzten?


    Bin für jegliche Hilfe dankbar!

    Die einfachste Möglichkeit statt Tabelle - funktioniert allerdings nur, wenn dein Template es erlaubt, was ich nicht beurteilen kann.


    Code
    <div class="row-fluid">
<div class="span6">Bild</div>
<div class="span6">Text</div>
</div>
<div class="row-fluid">
<div class="span6">Text</div>
<div class="span6">Bild</div>
</div>


    Die divs kannst du dann weiter gestalten, mit padding, background und so fort.

    Bleib mit CSS dran. Das sollte mit dem Flexbox-Layout kein Problem sein. Erstelle eine Liste mit dem Bild als einen li-tag und den Text als weiteren Listenpunkt. Per CSS setzt du display der Liste (ul) auf flex. Das Alignment der beiden Listenpunkte (li) setzt du auf stretch.


    Beispielhaft:

    Code
    <div class="meineliste"><ul><li>Bild</li><li>Text</li></ul></div>


    Code
    .meineliste ul {display:flex; flex-direction:row;flex-wrap:wrap;}
.meinelist li {align-items:stretch;}


    So in etwa sollte das aussehen. Im responsive Design sollte die rechte Box dann nach unten rutschen.