Abstand zwischen 4 div container automatisch

Hallo alle zusammen,

ich habe ein triviales Anfängerproblem. Ich habe vier DIV-Container (es sind Rahmen). Diese sollen nebeneinander stehen mit immer gleichem Abstand. Außerdem sollen sie responsive Funktionalität haben, weshalb ich float verwendet habe. Mein Ansatz:

HTML:

<div class="gesamtrahmen">

<div class="rahmen">
test 1
</div>

<div class="rahmen">
test 2
</div>

<div class="rahmen">
test 3
</div>

<div class="rahmen">
test 4
</div>
</div>

CSS:

.gesamtdrahmen{
width:100%;
padding-top:30px;
}

.rahmen{
border: solid #dddddd 1px;
box-shadow: 0px 0px 2px #dddddd;
width:22%;
float:left;
padding:10px;
margin:0 auto;
}

Leider entsteht so aber kein automatische gleich großer Abstand zwischen den Rahmen. Kann mir jemand helfen und sagen, was ich aendern muss, damit ich gleich große Abstaende zwischen den Rahmen habe?

Vielen Dank
Schöne Grüße
Sunny

Deine Rahmen haben keinen margin nach außen und somit überhaupt keinen Abstand.

margin: 0 3% 0 0; <- 3% Abstand nach rechts

Für den 4. Rahmen brauchst du keinen Abstand mehr - das kannst du dann so stylen:

.rahmen:nth-child(4n) { margin: 0; }

Hallo Toifel,

das funktioniert. Nach der Funktion ".rahmen:nth-child(4n) { margin: 0; }" habe ich gesucht. Danke

Schöne Grüße