class Div's nebeneinander

[Malaxo]

Ist die Möglich, ein class Div zu erstellen das unbekannte male (PHP variable) vor kommt, und jedes Mal neben einander steht.

Also müsste es irgendwie den Abstand von links und rechts jeweils 20px sein aber darf nicht fix stehen.

Ein paar Tipps oder Stichworte um es zu realisieren wäre gut.

Hab mühe es zu beschreiben aber im Bild evt. erkennbar:

 

[Maik]

Hi,

dies lässt sich mit der float- und margin-Eigenschaft realisieren.

div.box {
float: left;
margin: 10px;
border: 1px solid #000;
}

 

[Malaxo]

Hehe ok hab mir wohl zu viel überlegt

Nun nach jedem dritte ein Cleardiv damit das 4 eine Zeile weiter rutscht, ist das richtig?

Jap in PHP ist mir schon klar. Geht aber jetzt um das Cleardiv was bestimmt hin muss oder?

 

[Maik]

Ich weiss jetzt nicht, wie das Dokument im Detail strukturiert ist, aber das DIV .clear liesse sich auch erst zum Schluß einbinden, um nach den floatenden Boxen den normalen Textfluss herzustellen. Durch die Breitenangabe von 33.3% werden pro Zeile drei Boxen ausgegeben, und die vierte Box automatisch in der nächsten Zeile angeordnet:

div.wrapper {
width: 600px;
margin: 0 auto;
border: 1px solid #cacaca;
}

div.outerbox {
float: left;
width: 33.3%;
}

div.innerbox {
margin: 10px;
border: 1px solid #000;
}

div.clear {
clear: left;
}

<div class="wrapper">
     <div class="outerbox"><div class="innerbox">box 1</div></div>
     <div class="outerbox"><div class="innerbox">box 2</div></div>
     <div class="outerbox"><div class="innerbox">box 3</div></div>
     <div class="outerbox"><div class="innerbox">box 4</div></div>
     <div class="clear"></div>
</div>