How to modify the orientation of a
    spanning multiple columns?


Tags: html,css,html-lists

Problem :

I am producing a <ul> of alphabetically sorted items, which spans over multiple lines. An example of this can be seen here:

http://jsfiddle.net/H4FPw/1/

currently the list is laid out horizontally, as follows:

a  b  c

d  e  f

g  h  i

j  k  l

But clients being clients, I have now been asked to change this so that the list is vertically oriented, as follows:

a  e  i

b  f  j

c  g  k

d  h  l

Unfortunately I don't know how to do this in the nice and tidy way that I've originally done it.

Can somebody please fill me in if this is possible to do with single <ul> and CSS? Or do I have to make multiple lists?



Solution :

You can't do it by only changing CSS.

Well, you can if you don't care about IE: http://caniuse.com/#search=multiple%20column

You have to compromise somewhere:

  • Split the <ul> into three <ul>s manually.
  • As hinted at by @PeeHaa, use server-side code to change the order that the <li>s are output (but still keep them inside one <ul>).
  • Use JavaScript to reorder the <li>s. I did this using jQuery here, but it would probably make more sense to use a plugin like this: http://welcome.totheinter.net/columnizer-jquery-plugin/

    CSS Howto..

    HTML/CSS: How can I float the 'a href' elements to the left without them leaving the div element that they are inside in?

    How to set z-index in css?

    How to horizontally center align a span inside a div

    How to reverse a sequence of CSS transitions and transforms which contain span:nth-child

    How to make scrollable table's header fixed using css fixed position property?

    How do I put my index.html in the same folder as my other .html files on github?

    How to ensure dynamic CSS is loaded first before AJAX content?

    How I can set a different font size for my text by css?

    How can I apply a css rule to all descendants of an elements

    CSS: how to make children fit parent's width

    How do I execute a LESS guard when a boolean is not true?

    How to go about making an image move up in the div on hover

    How to control the size of a table cell in css

    How can I manage the dimansions of #homeSub in CSS so it won't diappear when I move my mouse from homeBox to homeSub?

    How align div to a form field?

    How can I create HTML/CSS responsive tile?

    CSS. Show TFOOT only when TBODY has no rows

    How to set a minimum content size of a webpage in html, css? [closed]

    how to make background 100% on a top menu

    PHP/CSS how to keep my checkboxs from going past my border

    How do I apply the browser height to a CSS class?

    How to target the href to div

    How to convert UPPERCASE text to Title Case using CSS

    how to Load a css file for html page android web view

    How to change css by using tag or class name in typescript?

    How to measure the amount of time an animation took place using JavaScript

    How to make a div that appear on hover, stay while its hovered on in jquery or css

    How do I make my css class footer go from the left to right side of the screen?

    How do I make a (mock) bank system? [closed]

    How to put bootstrap code inline