Vertical list growing horizontally

HTML & CSS
1

Hi,

I was trying to create vertical list which grows horizontally.

Vertically i’m limiting the records as 6 items after that it will be wrapped up and new vertical list is started.

I think the best option will be is to use ul li.
I’m missing few things in css as i’m not getting the proper layout.

my lists code look like this

<div>
<ul><li>1</li><li>2</li><li>4</li><li>5</li></ul>
<ul><li>1</li><li>2</li><li>4</li><li>5</li></ul>
<ul><li>1</li><li>2</li><li>4</li><li>5</li></ul>
<ul><li>1</li><li>2</li><li>4</li><li>5</li></ul>
</div>

I’m expecting list showing like

1  1 1 1
2  2 2 2
3  3 3 3
4  4 4 4
5  5 5 5

How could i achieve this layout using some simple css techniques.

I’m also open to other layouts which meets my requirement.

Hopefully someone will be familiar with this.

Thanks in advance.

2

You could give each ul a width of like 15px, and text align center, and float each left. That should work.

3

It seems you need a table?

4

No … Eric has posted a solution that doesn’t need a table.

5

float:left does the trick.

Thanks

6

I have noticed one thing , if my lists grows horizintally at some point the list wraps down

If i give a larger width for container div the list will be horizontally aligned with a horizontal bar.

As my list is generated dynamically i cannot be specific in width value.

Is there a way to make it happen.

One more thing i missed to tell is, i’m working on webkit browser

7

You’ll need to provide a little more information as it is not quite clear of what the dynamics you need are.

If you want data to align in columns but without setting widths then you can’t do that with css2.1.

If you have six items per row then you could divide the container width by six either with percentages or pixels and give that width to the list item (allow a margin for error due to rounding issues).

However it almost sounds as though you have tabular data and then a table would be more appropriate.

8

As Paul mentioned! This can’t be done without setting a width! I know setting a width can be difficult since you would like to generate those columns dynamically, but there is no way you could do this without setting a width. I usually use percentage in these kind of cases

9

Thanks, i will try to set width based on the number of items that i have.