Display Items from a list as column depending on class only with CSS

Question

Im trying to display the items of a list depending on their class as two seperated columns without adding extra html wrappers or using Jquery.

I've postet an example here http://codepen.io/danielschmid/pen/vwcta/?editors=010 Note: I’ve only added the margin-left and right to better exemplifie what im trying to achive.

The only way i can think of it would be with absolute positions but than i need to know the size of any element and add an individual top position as an offset like here: http://codepen.io/danielschmid/pen/aKBrc/

Any ideas ?

thanks,

daniel

Answer 1

you need to float only one of them, the other needs its layout triggered with overflow:hidden;.

No margin should be used.

to keep the non floatting li standing on right side, you can reset direction on ul and set it back on li.

DEMO

---

to go further to avoid gaps, you will unfortunately need to multiplicate selectors to test if so many of one kind stands ahead to apply the right negative margin-top. DEMO . this can be endless if ul has hundreds of lis :)