Tabellenfreies CSS-Layout

[Anders Winkler]

Hallo Forum,

ich erarbeite gerade ein Konzept für ein CMS bei dem die Ausgabe des Frontends als tabellenfreies HTML erfolgen soll. Das Design selbst soll dann über CSS gesteuert werden. Jeder CMS-Kunde soll einen in der Struktur vollkommen identischen HTML-Output erhalten.

Die Hauptanforderung an die Struktur ist daher, dass damit "jedes" Design umsetzbar ist. An einem konkreten Beispiel möchte ich mein Problem dabei erläutern und hoffe auf einige hilfreiche Tipps durch Euch.

Nehmen wir also mal einen immer wiederkehrenden Block mit einem Image (I), einem Titeltext (T) und einem Beschreibungstext (B). Diesen Block kann ich theoretisch auf beliebige Art und Weise strukturieren, zum Beispiel:

a.)
+--------+------------+
| IIIIII | TTTTTTTTTT |
| IIIIII |            |
| IIIIII | BBBBBBBBBB |
| IIIIII | BBBBBBBBBB |
| IIIIII | BBBBBBBBBB |
| IIIIII | BBBBBBBBBB |
+--------+------------+

b.)
+------------+--------+
| TTTTTTTTTT | IIIIII |
|            | IIIIII |
| BBBBBBBBBB | IIIIII |
| BBBBBBBBBB | IIIIII |
| BBBBBBBBBB | IIIIII |
| BBBBBBBBBB | IIIIII |
+------------+--------+

c.)

+---------------------+
| TTTTTTTTTTTTTTTTTTT |
|                     |
| IIIIII BBBBBBBBBBBB |
| IIIIII BBBBBBBBBBBB |
| IIIIII BBBBBBBBBBBB |
| IIIIII BBBBBBBBBBBB |
|        BBBBBBBBBBBB |
| BBBBBBBBBBBBBBBBBBB |
| BBBBBBBBBBBBBBBBBBB |
+---------------------+

d- unendlich) ...

Die Frage ist nun, wie ich den HTML-Output strukturiere, damit Image (I), Titeltext (T) und Beschreibungstext (B) in jeder beliebigen Darstellungsform angezeigt werden können. Nochmal, ganz wichtig: der HTML-Output selbst sollte für alle CMS-Kunden mit ihren verschiedenen Layouts immer gleich bleiben!

So?
A.)
<div class="block">
  <img class="image" src="...">
  <span class="titeltext">...</span>
  <span class="beschreibungstext">...</span>
</div>

Oder so?
B.)
<div class="block">
  <span class="titeltext">...</span>
  <img class="image" src="...">
  <span class="beschreibungstext">...</span>
</div>

Oder so?
C.)
<div class="block">
  <span class="titeltext">...</span>
  <span class="image"><img src="..."></span>
  <span class="beschreibungstext">...</span>
</div>

Gibt es überhaupt den Königsweg? Oder kann ich sowieso nur innerhalb eines bestimmten Rahmens "beliebige" Layouts mit einer fixen HTML-Struktur ermöglichen? Mit welchen Mitteln kann ich es so flexibel wie möglich machen?

Bin für jeden Ratschlag dankbar, wünsche ein schönes Wochenende,
Anders