dynamic lists with CSS

how create lists from DB display in three columns

[nevasport]

Hello everybody.

This is my first post in this great CSS forum.

I am creatin a site completely from scratch, and instead of reading full tutorials I am doing it the "hacker way", fixing issues as they appear.

Right now I am trying to create a list of items extracted from a database (x items) and display them in three columns ordered alphabetically. I am trying to use the <ul> and <li> tags in order to make it simple but I have not found an easy way to do this.

I guess another solution is creatin a div per item and floating them left but I was wondering if someone had tried this with simple lists.

Thanks.

Pepe

[DanA]

Float the <li> left and give them a width (30% for example with overflow:hidden; if you have no control of the length of the data)

[Robin_reala]

Agreed with DanA - the easiest way now is to work out how long your total number of items is and divide into 3 parts, then write them out as three separate lists and float each one left.

This is of course not to most semantic way of going about things, as you're marking them up as three separate lists instead of one. If you want to do any better you'll have to wait for support for CSS3's columns module [w3.org] (which is currently in working draft). This would let you do something like:

ul { column-count: 3; }

and your <ul> would automatically gain three evenly balanced columns. At the moment only Gecko (Firefox, Seamonkey, Camino etc) has a testing implementation but hopefully this will change soonish.

[nevasport]

Thanks for your responses, nevertheles, before this new CSS3 comes, I think IŽll use a a div per item and clear every three items:

CSS CODE
.item
{
float: left;
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}
.clearboth { clear: both; }

HTML CODE

<div class="item">
Item1
</div>
<div class="item">
Item2
</div>
<div class="item">
Item3
</div>
<br class="clearboth">
<div class="item">
Item4
</div>
<div class="item">
Item5
</div>
<div class="item">
Item6
</div>
..................

thanks.

Pepe