Html List Elements Top To Bottom, Then Left To Right

I want to do a list of a bunch of items. The height is fixed. So when the list hits the bottom, I want it to wrap around and start a new column. Is there a way, without knowing the

Solution 1:

I can't think of a way using css to accomplish this but if you're not opposed to jquery, check out this: http://welcome.totheinter.net/columnizer-jquery-plugin/

Solution 2:

Check this CSS Trick

the key is this CSS:

ul {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }

It will do exactly what you ask.

Solution 3:

You could use CSS3 columns.

Here's a fiddle: fiddle and here's the WC3 spec

Solution 4:

There is a proposed CSS 3 property for multicolumns (see Quirksmode.org -- Columns for examples using the proprietary properties), but that's not supported in all modern browsers yet. Even so, I'm not sure the support is as repeatable across the browsers that do support it as one might hope.

Solution 5:

why don't you for JavaScript. It is simple and compatible with all browser

If you go for CSS3 then IE (The Useless browser) Will not support it.

I will just give you a hint for javascript

just Calculate Height of your Parent Div

var height = document.getElementById("ParentDiv").style.height;

Create Child div with same height and add your Divs inside it new child div.

If height of child div is get exceeds that parent div

Create another child div and continue the process.

This process is hectic but will support to all browser

When jQuery-plugins are Good option but I personally feel that if they can do it you can do it.

All the best