CSS Wie am besten Umsetzen? (float oder absolute Positionierung)

[DerEineDa]

Moin mal wieder,

Im Anhang findet ihr ein Teil eines Designs, das ich in HTML/CSS umsetzen möchte. Die schwarzen Boxen sind dabei Bilder und die blauen Boxen werden später Text, aber das ist nicht so wichtig.

Die ganze Seite wird eine fixe Breite haben. Ich bin ja auch eher ein Fan von Fluid-Layout, aber das habe ich nicht zu entscheiden.

So, das "Problem": Das ist ein typisches Beispiel dafür, wo ich nicht genau weiß, wie ich das ohne Tabellen am besten löse.

Wir haben da ja offensichtlich zwei Haupt-Spalten. Höchstwahrscheinich komme ich nicht drum herum, eine der beiden oder sogar beide Spalten zu floaten, weil am Ende noch ein Footer kommen soll, der sich über die gesamte Breite erstreckt. (Sollte ich nun eigentlich beide Spalten floaten (die linke left, die rechte right) oder nur eine von beiden und der anderen einen margin geben?).

Wenn ich nun floate, dann habe ich aber ein Problem mit den Content der einzelnen beiden Spalten. In beiden Spalten muss ich ein Bild links vom den Überschriften und Teaser-Texten platzieren (die schwarzen Boxen im Grafik-Anhang).

Sollte ich nun eine der beiden Spalten - oder sogar beide - floaten, kann ich ja kein Float mehr in den Spalten verwenden, um die Bilder links zu floaten. Ein "clear" innerhalb einer Spalte würde dann nicht nur den "Eintrag" in der Spalte clearen, sondern alle vorherigen floats. Das würde ja das gesamte Design zerstören.

Also wie setze ich das am besten um? "Float im Float" ist ja wie eben ausgeführt keine Möglichkeit.

Wie würdet ihr das machen?

Danke schonmal!

Nachtrag:
Ich sollte vielleicht noch dazu sagen, dass ich den IE6 vernachlässigen kann. Im IE7 sollte das aber schon laufen, also ist "inline-block" leider tabu.

 

[TKOlit]

Ein "clear" innerhalb einer Spalte würde dann nicht nur den "Eintrag" in der Spalte clearen, sondern alle vorherigen floats. Das würde ja das gesamte Design zerstören.

Wo hast du denn das her?
Ein clear wirkt sich immer nur auf die floats aus, die im gleichen Elternelement, wie das clear liegen.

Ein Beispiel:

<div style="float: left"> <!--  äußeres floatendes Element -->
 <div style="float: left"></div> <!--  inneres floatendes Element -->
 <div style="float: right"></div> <!--  inneres floatendes Element -->
 <div style="clear: both"></div>
</div>
<div style="float: right"></div> <!--  äußeres floatendes Element -->

Das clear im Beispiel hat nur Auswirkungen auf die inneren floatenden Elemente, die äußeren Elemente sind davon vollkommen unbeeinflusst.

 

[IceMatrix]

relativ einfach ist es, wie bei ner tabelle zu arbeiten. jeder eintrag in der linken und rechten spalte wird jeweils in ein div verpackt, das rechte div bekommt float:left. dann kommt ein <br /> und in der nächsten zeile gehts genauso weiter.
und am ende dann <br clear="all" /> und dein bild über beide spalten hintendran.
die divs um die zellen herum solltest du per width ne feste breite geben. den zellen der rechten spalte per margin-left nen abstand zur linken spalte.