Anordnung von div im Container?

[gombi]

Hallo!

Hab ne Grundsatzfrage die ich nicht ganz verstehe.

Ich hab nen Container:

Code: Alles auswählen

#inhalt {
   background: url(images/bg.png) repeat;

   line-height: 18px;

   margin: 0px auto;
   padding: 10px 0px 0px 10px;

   width: 796px;
   height: 100%;
   border-left: solid;
   border-right: solid;
   border-width: 2px;
   border-color: #ffff00;
}

und in diesem habe ich andere dev's die richtig angeordnet werden sollen.
Nämlich diese:

Code: Alles auswählen

.thumbnail {

   float: none;

   margin: 5px;

   padding: 8px;

   text-align: center;

   color: #CCCCCC;

   width: 166px;

   height: 175px;

   }

Mit float left werden die thumbs richtig nebeneinander angeordnet, aber der Container wächst nicht mit. Hab gelesen dass das am float liegt, deshalb hab ich das float weggenommen und jetzt befindet sich alles im Container, aber die thumbs werden einzeln unter einander angeordnet.

Wie ordne ich viele kleine Elemente in einem Container gleichmäßig an?

Vielen Dank!
Gombi

[sejuma]

Dein #inhalt wächst deshalb nicht mit, weil du seine Breite und Höhe durch width- und height-Werte begrenzt hast.
Nimm den height-Wert raus, dann sollte er in der Länge mitwachsen.
Die thumbnails kannst du dann wieder floaten.

[gombi]

Wenn ich die Höhe weg nehme geschieht das gleiche wie mit height: auto. Die Elemente werden unterhalb des Containers angeordnet. Nur wenn ich das float wegnehme werden die div's im Container angezeigt.

Wie funktioniert das?

[gombi]

Ok! Hab die Lösung!

Code: Alles auswählen

#inhalt {
   background: url(images/bg.png) repeat;

   line-height: 18px;

   margin: 0px auto;
   padding: 10px 0px 0px 10px;

   width: 796px;
  overflow: auto;
   border-left: solid;
   border-right: solid;
   border-width: 2px;
   border-color: #ffff00;
}

Die Höhe wegnehmen und dafür das overflow rein. Jetzt funktioniert float: left auch!

LG

[sejuma]

Sollte auch ohne overflow gehen, wenn keine Höhe hinterlegt ist.