zentriert nebeneinander - oder auch nicht

[Encoder]

Hallo

Ich weiß grad nicht ob ich einfach nur voll auf dem Schlauch steh und ins Bett sollte, ob ich folgendes Problem wirklich noch nicht hatte.
Ich habe zwei divs mit fester Breite, da ist jeweils ein Bild mit Untertitel drin.
Die sollen zentriert angezeigt werden und zwar entweder nebeneinander, oder wenn dafür nicht genug Breite da ist untereinander. Jeweils zentriert, d.h. entweder der Block aus den nebeneinander liegenden divs zentriert, oder eben jedes einzeln für sich zentriert, falls sie untereinander sind.
Falls nebeneinander, da ist mir inzwischen schon egal welchen Abstand sie zueinander haben. Es soll halt schön aussehen.

Und ich hab überhaupt keinen Plan wie ich das angehen soll. Sämtliche div-Verschachtelungen scheitern an irgendwas. Ich krieg entweder hin dass sie nebeneinander stehen und zentriert sind, aber dann brechen sie bei kleiner werdendem Viewport nicht um. Oder halt mir floaten, dass sie bei Bedarf umbrechen, aber dann ist wieder nichts zentriert.
Hat mir jemand die zündende Idee?

Zur Veranschaulichung, das hier sind meine Spiel-divs. Es soll eine Kombination aus den beiden Verhaltensweisensein.

<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>

[Beat]

Du suchst nach display:inline-block;

mfg Beat

[Encoder]

Ja das geht schon in die richtige Richtung. Damit krieg ich es ohne floaten so hin dass die divs umbrechen. Aber entgegen der Beschreibung "Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann..." wird hier kein margin:auto berücksichtigt.

Bisher hab ich das da zum Test.
<div style="width:50%; height:400px; border:1px solid blue;">
hier steht Text<br />
<div style="margin:0px auto; display:inline-block; border:1px dotted grey;">
<div style="display:inline-block; border:1px solid red; width:100px; height:150px; margin:0px auto;"></div>
<div style="display:inline-block; border:1px solid green; width:150px; height:200px; margin:0px auto;"></div>
</div>
</div>

Zumindest das grau gepunktete div sollte da doch zentriert sein? Oder stimmt da noch irgendwas nicht?

[Felix Riesterer]

Lieber Encoder,

von Deiner div-Suppe möchte ich Dir ganz dringend abraten!

Zum Verständnis mit display:inline-block...

Das Element, das so ausgezeichnet wird, verhält sich nun zu seiner Umgebung wie ein inline-Element, sprich wie ein Textbuchstabe. Daher reagiert es nicht mehr auf margin:auto, aber sehr wohl auf ein text-align:center des Elternelements.

Liebe Grüße,

Felix Riesterer.

[Encoder]

von Deiner div-Suppe möchte ich Dir ganz dringend abraten!

Schön find ich die auch nicht. Aber das war halt ein Testbeispiel, wo ich ohne Text und Bild mit dem Verhalten der divs rumspiele. Mit border, damit man sieht wo die divs grad sind und was sie tun usw.

Aber trotzdem Danke für deine Antwort dort!

Das Element, das so ausgezeichnet wird, verhält sich nun zu seiner Umgebung wie ein inline-Element, sprich wie ein Textbuchstabe. Daher reagiert es nicht mehr auf margin:auto, aber sehr wohl auf ein text-align:center des Elternelements.

Das heißt ich krieg meine Vorstellung nicht wirklich realisiert?
So langsam glaube ich dsas es daran scheitert, weil ich einmal den Verbund aus zwei Elementen zentrieren will und einmal jedes Element für sich. Und dann noch verbunden mit dem automatischen Umbruch, sobald der horizontale Platz ausgeht.

[gast42]

Das heißt ich krieg meine Vorstellung nicht wirklich realisiert?

Das heißt genau das Gegenteil! Deine beiden DIVs werden sich wie zwei Worte in einem zentrierten Absatz brav in der Mitte aufhalten, entweder neben- oder übereinander, je nach Platz.

[Encoder]

Ach ja ich bin auch blöd. Hab das alles durcheinander gebracht, aber jetzt weiß ich was Felix meinte. Ist ja eigentlich ganz einfach, wenn man nicht so kompliziert denkt :-)
Danke jedenfalls!

[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.