SonMiko
Erfahrenes Mitglied
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:
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...
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:
.contentbox{
width:640px;
height:400px;
overflow:hidden;
}
.contentbox ul{
width:150px;
padding:0;
margin:0;
float:left;/*denke das macht sinn*******/
}
Code:
<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...
