Splitting list items into vertical columns

Question

I am a little rusty in the UL / LI syntax, and I was wondering how you do a list wrapper. For example make:

1 2 3 4 5 6

Take a look:

fourteen
2 5
3 6

Right now I have a header, content and footer (all with a height set to a certain%). I want the list to wrap when it reaches the footer, or the bottom of the% content.

So what I want as the final product is a div for dynamically resizing based on what can fit on the screen. If I have 12 elements and the screen can fit in 2 columns, then it will be 2 columns with 6 rows, if the screen can fit 4 columns, then it will be 4 columns with 3 rows, etc.

Answer 1

First of all, this is stupid ... but it works ... however, it only works in certain cases and includes a lot of stupid numbers. Definitely not modular. FIDDLE (do you need to indicate that you need to resize the browser?)

HTML

<ul> <li>01</li> <li>02</li> <li>03</li> <li>04</li> <li>05</li> <li>06</li> </ul> 

CSS

 /* apply a natural box layout model to all elements */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } ul { list-style: none; padding: 0; margin: 0; width: 4em; border: 1px solid orange; overflow: hidden; /* in place of clearing float */ } ul li { position: relative; /* for the negative top distance to work */ display: inline-block; border: 1px solid red; width: 2em; height: 2em; float: left; clear: left; } ul li:nth-of-type(n+4) { float: right; clear: none; top: -6em; } @media (min-width: 30em) { ul { width: auto; float: left; } ul li { float: left; clear: none; border: 1px solid green; } ul li:nth-of-type(n+4) { float: left; top: 0; } } /* =========== end === */ 

I'm sure there is a nice jQuery for this ... If your table is not dynamically populated with different amounts of information, you can do something like this cosmetically or use some kind of absolute positioning - the columns are probably the way to go though. Good luck ...

Answer 2

you can use the CSS column and start the basic styling of your ul as follows:

 ul {column-count:2; /* other styles*/ }