DIVs nebeneinander und zentriert...

[Oliver Dannat]

Hallo,

ich möchte eine gewisse Anzahl (<- dynamisch anpassbar, da die HTML-Seite über ein Script generiert wird) von DIV Containern nebeneinander anordnen und das ganze dann zentriert darstellen. Die Anordnung bekomme ich mit 'float: left;' hin, leider ist es mir bisher nicht gelungen zu zentrieren.

Ich habe mal ein Beispiel gebaut:
http://www.oliverdannat.de/css_problem/index.html
Die DIVs mit den Bildern sollen im umschließenden, grauhinterlegten DIV zentriert dargestellt werden.

Mein Stylesheet liegt hier:
http://www.oliverdannat.de/css_problem/style.css

Ich habe mit HTML, CSS noch nicht so viel gemacht, deshalb stehe ich momentan ohne Idee da. Meine bisherige Suche im Web hat auch nichts gebracht. Ich dachte, wenn ich das Ganze in einen umschließenden DIV Container stecke, dessen Größe sich automatisch an den Inhalt anpasst, klappt auch das zentrieren. Leider ist mir nicht klar, wie man so einen Container erzeugt. Lass ich das width Attribut weg, wird auf die ganze Seite aufgezogen, ist width zu klein gewählt, geht's auch nicht...

Hat jemand von Euch vielleicht eine Idee? Bin für jede Hilfe dankbar.

Danke & Viele Grüße, Oliver

[Gunnar Bittersmann]

ich möchte eine gewisse Anzahl […] von DIV Containern nebeneinander anordnen und das ganze dann zentriert darstellen.

Oliver,
Das Ganze muss dann in einem Element stehen, welches du mit margin: auto zentrierst (für IE zusätzlich text-align: center fürs Elternelement).

Statt

<div>  
  <div>foo</div>  
  <div>bar</div>  
        ⋮  
  <div>quz</div>  
</div>

kannst du auch durchaus der Struktur angemessene Elemente verwenden:

<ol>  
  <li>foo</li>  
  <li>bar</li>  
       ⋮  
  <li>quz</li>  
</ol>

Live long and prosper,
Gunnar

[wahsaga]

hi,

ich möchte eine gewisse Anzahl […] von DIV Containern nebeneinander anordnen und das ganze dann zentriert darstellen.

Das Ganze muss dann in einem Element stehen, welches du mit margin: auto zentrierst (für IE zusätzlich text-align: center fürs Elternelement).

Damit musst du aber für das Elternelement eine Breite vorgeben.

So viele gefloatete Elemente nebeneinander darzustellen, wie passen - und dann aber links und rechts einen gleichen Abstand zum Seitenrand einzuhalten, ist ein schwer (bis gar nicht) lösbares Problem.

Jeena hatte das hier schon mal recht ausführlich diskutiert - ich glaube, http://forum.de.selfhtml.org/archiv/2005/3/t102608/ gehörte dazu.

gruß,
wahsaga

[Ingo Turski]

Hi,

ich möchte eine gewisse Anzahl (<- dynamisch anpassbar, da die HTML-Seite über ein Script generiert wird) von DIV Containern nebeneinander anordnen und das ganze dann zentriert darstellen. Die Anordnung bekomme ich mit 'float: left;' hin, leider ist es mir bisher nicht gelungen zu zentrieren.

das ist auch grundsätzlich schlecht möglich. Wenn Du float benutzt, fällt text-align zur Zentrierung weg und bei display:inline kannst Du keine Breiten angeben.

Ich habe mal ein Beispiel gebaut:
http://www.oliverdannat.de/css_problem/index.html
Die DIVs mit den Bildern sollen im umschließenden, grauhinterlegten DIV zentriert dargestellt werden.

Das ist in diesem Fall überhaupt kein Problem:

.main {  
  width: 660px;  
  padding: 15px 65px;  
  background: silver;  
  margin: 0px auto;  
}

Schwierig bis unmöglich - ohne server- oder clientseitige Berechnung - wird es bei variablen Breiten.

freundliche Grüße
Ingo

[Oliver Dannat]

Hallo Gunnar, wahsaga und Ingo,

danke für Eure Antworten, vor allem für die super schnelle Reaktion.

Mein Fazit ist dann also, dass mein Vorhaben, leider wie gewünscht nicht realisierbar ist. Werde dann wohl doch teilweise bei Tabellen bleiben müssen, schade eigentlich...

Auf jeden Fall noch mal danke und viele Grüße
 Oliver