✔ mehrere Elemente nebeneinander zentrieren

[suntrop]

hi und hallo,

ich habe folgendes Gerüst um vier Elemente (Foto + Untertitel)
in einem DIV-Container (aussen) zu zentrieren, was leider fehlschlägt.

<div id="aussen" style="text-align:center; width:800px; height:130px;">
	<div style="float:left;padding-left:20px;">Titel über den vier Elementen</div>
	<div style="float:right;padding-right:20px;">Link1 Link2</div>

	<br style="clear:both" />

	<div style="border1px; >				<--Element 1 -->
		<div id="foto">Foto</div>
		<div id="untertitel">Untertitel</div>
	</div>

	<div style="border1px; >				<--Element 2 -->
		<div id="foto">Foto</div>
		<div id="untertitel">Untertitel</div>
	</div>
</div>								<--Elemente 3 und 4 weggelassen -->

Nach diesem Code ist es klar, dass die zwei Elemente untereinander
dargestellt werden, da die DIV-Elemente einen Zeilenumbruch erzeugen.
Zentriert sind sie jedoch!
Füge ich jetzt ein "float:left" für die zwei Elemente hinzu, dann werden
die beiden nicht mehr zentriert in dem "aussen-" Kasten dargestellt, sondern
eben auf der linken Seite.

Ich bin deshalb ein bisschen in der Klemme, denn wie soll ich vier
Blöcke nebeneinander darstellen, die nach links und rechts den gleichen
Abstand aufweisen (und der Zwischenraum soll natürlich auch gleich sein;-)

Hat jemand eine Lösung für das Problem oder habe ich nur die DIVs falsch
genutzt und muss das anders schrieben?

Ich danke für jeden eurer Gedanken für mich

 

[Maik]

In diesem Lösungsansatz besitzen die vier Blöcke eine feste Breite und werden mit Hilfe der margin-Eigenschaft über die Gesamtbreite des DIV #aussen gleichmäßig verteilt:

<div id="aussen" style="text-align:center; width:800px;height:130px;border:1px solid #000;">
        <div style="float:left;padding-left:20px;">Titel über den vier Elementen</div>
        <div style="float:right;padding-right:20px;">Link1 Link2</div>

        <br style="clear:both" />

        <!-- Element 1 -->
        <div style="border:1px solid #000;float:left;width:148px;margin-left:40px !important;margin-left:20px;">
                <div class="foto">Foto</div>
                <div class="untertitel">Untertitel</div>
        </div>

        <!-- Element 2 -->
        <div style="border:1px solid #000;float:left;width:148px;margin-left:40px;">
                <div class="foto">Foto</div>
                <div class="untertitel">Untertitel</div>
        </div>

        <!-- Element 3 -->
        <div style="border:1px solid #000;float:left;width:148px;margin-left:40px;">
                <div class="foto">Foto</div>
                <div class="untertitel">Untertitel</div>
        </div>

        <!-- Element 4 -->
        <div style="border:1px solid #000;float:right;width:148px;margin-right:40px !important;margin-right:20px;">
                <div class="foto">Foto</div>
                <div class="untertitel">Untertitel</div>
        </div>
</div>

 

[suntrop]

Danke dir Maik für die Hilfe.

Ich hatte auch schon an eine Aufteilung gedacht, bei der man
eben die Breite berechnet und dann die Inhalte darin angepasst
aufteilt.

Habe gar keine automatische email Benachrichtigung bekommen,
deshalb hat es etwas gedauert.


mfg
- suntrop -