DIV's nebeneinander und zentriert

[Padarom]

Hallo zusammen,
ich möchte in meinem Footer drei Spalten haben. Diese drei Spalten werden durch div's definiert.
Damit diese nicht komplett bis zum Bildschirmrand gehen, habe ich dafür auch einen Wrapper erstellt, welches eine Breite (width) von 60% hat. Dieses ist selbst zentriert.
Doch nun möchte ich die Kinder-Elemente (also die 3 Spalten) ebenfalls innerhalb des Mutter-div's zentrieren.

Derzeit sieht es so aus:

<div id="spalten">                
    <div class="spalte">                    
       Text1                
    </div>                
    <div class="spalte">                   
        Text2                
    </div>                
    <div class="spalte">                   
        Text3                
    </div>                
    <div style="clear: both"></div>           
</div>

[COLOR=#823125]#spalten[/COLOR] [COLOR=#222222]{[/COLOR]    [COLOR=#cf4820]
    width[/COLOR]: [COLOR=#4f76ac]60[/COLOR][COLOR=#4f76ac]%[/COLOR];    [COLOR=#cf4820]
    margin[/COLOR]: [COLOR=#4f76ac]0[/COLOR] [COLOR=#4f76ac]auto[/COLOR];    [COLOR=#cf4820]
    color[/COLOR]: [COLOR=#4f76ac]white[/COLOR];[COLOR=#222222]
}[/COLOR][COLOR=#823125]
*[/COLOR][COLOR=#823125].spalte[/COLOR] [COLOR=#222222]{[/COLOR]    [COLOR=#cf4820]
    width[/COLOR]: [COLOR=#4f76ac]30[/COLOR][COLOR=#4f76ac]%[/COLOR];    [COLOR=#cf4820]
    padding[/COLOR]: [COLOR=#4f76ac]10px[/COLOR];    [COLOR=#cf4820]
    margin-right[/COLOR]: 10px;    [COLOR=#cf4820]
    float[/COLOR]: [COLOR=#4f76ac]left[/COLOR];[COLOR=#222222]
}[/COLOR]

Hier sieht man bereits mein Problem. Die inneren Div's haben jeweils eine Breite von 30% + 30px (zwecks Padding & Margin), womit ich im gesamten noch nicht auf meine 100% komme.Wie kann ich also diese DIV's zusammen genau mittig im Fenster anzeigen lassen?Danke im Voraus.Mit freundlichen GrüßenPadarom

 

[Hansii]

Probiers mal mit

margin: 0 auto;

Wie sieht es dann aus ?

 

[vitus37]

Möglich wäre es die Abstände aus .spalte herauszunehmen und in den .spalte-DIVs je ein neues weiteres DIV einzuführen. Dieses erhält eine automatische Breite (width:auto) und die entfernten Abstandsattribute.

Dies ist zwar keine besonders semantische Umsetzung, benötigt jedoch keine nervenaufreibenden Berechnungen mit JavaScript.

Btw.: Das Sternchen vor .spalte ist unnötig. Der Selektor ändert sich dadurch nicht.

 

[Padarom]

@Hansii: Der Wrapper hat ja bereits margin: 0 auto. Wenn ich das bei den einzelnen Spalten mache sind die einfach irgendwo.
@vitus37: Ist etwas umständlicher, aber hat so geklappt, danke dir :)