prosilver Panel in zwei Spalten

[kolja]

Hallo Forum

Erstmal hoffe ich, das ich im richtigen Forum poste.
Hätte auch in das Coding-Forum gepasst.

Dann hoffe ich, das es für mein Problem eine (einfache) Lösung gibt.

Es geht um die Anzeige der Gruppen im Groups Page MOD.
http://www.phpbb.com/customise/db/mod/groups_page/
[ externes Bild ]
In dem Screenshot sieht man sehr deutlich mein Problem.
Das Panel wird über die komplette Seitenbreite gestreckt.

Nur wie bekomme ich es in zwei Spalten, als so:

Code: Alles auswählen

1. Gruppe      2.Gruppe
3. Gruppe      4.Gruppe

Das ist der Code aus dem Template:

Code: Alles auswählen

<div class="panel">
	<div class="inner"><span class="corners-top"><span></span></span>
	   <div class="group-left">
	       <h2>....</h2>
	       <p class="group-rank">...</p>
	   </div>
	<span class="corners-bottom"><span></span></span></div>
</div>

Geht das rein über CSS, oder muss ich über PHP immer rechte und linke Spalte definieren ?

Grüße vom Schreibtisch

Kolja

[Crizzo]

Hi,

gib den Containern, die die jeweilige Gruppe enthalten einfach eine Breite von maximal 50% (inkl. padding, margin!) und dann "float:left;" dann werden sie automatisch so angeordnet.

Grüße

[kolja]

Geil, das funktioniert ja sehr gut!
So gut, das ich da sogar 3 Spalten raus machen werde

Danke Blackhawk!

Nur haben die Spalten keine Abstand untereinander...
Aber das sollte noch zu lösen sein!

Kolja

[Crizzo]

Nur haben die Spalten keine Abstand untereinander...
Aber das sollte noch zu lösen sein!

Wenn du nicht mit einer festen Breite arbeitest, sondern mit width in Prozent, bietet es sich an sowas zu machen:

Code: Alles auswählen

<div class="admin"><div></div></div>
<div class="moderatoren"><div></div></div>
<div class="globmoderatoen"><div></div></div>

und dann gibst du den äußeren Div das float, die Breite und Co. Damit dann ein Abstand da ist schreibst du noch:

Code: Alles auswählen

.admin div, .moderatoren div, .globmoderatoren div {
margin: 5px;
}

Damit gehst du dem Problem aus dem Weg, dass zweimal width: 50% + margin-left; 5px und margin-right: 5px größer als 100% sind und nicht mehr nebeneinander passen.

Grüße