zentriert nebeneinander - oder auch nicht

[Felix Riesterer]

Lieber Encoder,

das Stichwort hat Dir Beat schon gegeben. Ich will auf Deine hässliche div-Suppe eingehen, denn die muss nun wirklich nicht sein!

<div style="width:50%; height:400px; border:1px solid blue;">
hier steht Text<br />
<br style="clear:both;" />
<div style="border:1px solid red; width:100px; height:150px; margin:0px auto;"></div>
<div style="border:1px solid green; width:150px; height:200px; margin:0px auto;"></div>
</div>

<div style="width:50%; height:400px; border:1px solid blue;">
hier steht Text<br />
<br style="clear:both;" />
<div style="margin:0px auto; border:1px dotted grey; width:300px;">
<div style="float:left; border:1px solid red; width:100px; height:150px; margin:0px auto;"></div>
<div style="float:right; border:1px solid green; width:150px; height:200px; margin:0px auto;"></div>
<br style="clear:both;" />
</div>
</div>

Ich baue das einmal in semantischeres Markup um:

<div id="ersterMantel">  
    <p>Hier steht etwas Text</p>  
    <p class="blaueBox"></p>  
    <p class="grueneBox"></p>  
</div>  
  
<div id="zweiterMantel">  
    <p>Hier steht auch etwas Text</p>  
    <p class="graueBox"></p>  
    <p class="blaueBox"></p>  
    <p class="grueneBox"></p>  
</div>

In dem Moment wo es nur darum geht ein Bild mit Unterschrift/Erklärungstext visuell als Box am Rand darzustellen, genügt es, dem entsprechenden Textabsatz eine passende Klasse zu geben. Vergleiche:

<p class="illustration">  
    <img src="bild.jpg" alt="Sonnenlumen im Feld" />  
    "<em>Sonnenanbeter</em>" von <strong>Fotograph</strong>  
</p>

Mit etwas CSS lässt sich dieser kleine schlanke Code prima dafür benutzen, eine "Bilderbox mit Text" am Rand eines Textes zu platzieren. Warum Du nun noch mit (vielzuvielen) div-Elementen hantieren musst, ist mir noch nicht ganz klar geworden. Daher habe ich einige div-Elemente oben durch Textabsätze ersetzt, da ich denke, dass sie nach dem Vorbild unten umgestaltet werden können.

Liebe Grüße,

Felix Riesterer.