Hallo zusammen,

ich stehe vor einem mir bis Dato unbekannten Problem und weiss ad hoc keine Lösung dafür.

Es handelt sich um einen DIV mit einer festen Breite und Höhe (640x400).
Nun möchte ich dass eine Liste, die eine Anzahl an Unterpunkten enthält, dort eingefügt wird. So weit so gut - aber nun sollen, sobald die maximale Anzahl an Listenpunkten erreicht ist, diese nach rechts weiterlaufen und quasi eine neue Spalte erzeugen - ich hoffe man kann mir folgen.

Ich mache mal ein Beispielcode:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13

.contentbox{ width:640px; height:400px; overflow:hidden; }   .contentbox ul{  width:150px;  padding:0;  margin:0;  float:left;/*denke das macht sinn*******/ }

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

<div class="contentbox"> <ul> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> <li> <a href="">Link</a> </li> </ul> </div>

Wie zu sehen ist, würde die Anzahl der Links nun die maximale Höhe der Contenbox sprengen. Wie könnte ich es also bewerkstelligen dass hier nach erreichen der maximal Höhe, die folgenden Link rechts in eine neue "Spalte" weiterlaufen?
Ich könnte das ganze natürlich mit JQuery beeinflussen und die Anzahl der Elemente abzählen und dann den Inhalt abgreifen, in ein neues Element einfügen und dieses "floatend" "appenden" - aber toll wäre natürlich wenn es eine reine CSS Lösung gibt - ich hoffe dass ich hier etwas dazu lernen kann, für soetwas gibts doch garantiert eine Lösung...

Hallo,

versuch es mal mit CSS3-Spalten, es gibt auch einen Multi-Column-Generator.

Nur son'e Frage. Wie errechnest du denn die Anzahl deiner LI's gemessen an der Höhe von 400px. Klar es sollten ca. 25 Einträge sein.. Aber, was ist, wenn dein Besucher seine Schriftgröße ändert ? Ist es nicht besser gleich eine max. Anzahl festzulegen ? Achso, kommen deine Daten aus einer Datenbank ?