How to layout list items in groups


Tags: html,css,css3

Problem :

Let's say we have a html list like this:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    ...
    <li>10</li>
</ul>

How to, using css and/or java script, make a browser show it like this (in groups of four, with some margin between the groups):

1 2    5 6    9 10
3 4    7 8    


Solution :

you can use css3 column-count property for this:

Write like this:

.colWrap {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
    -webkit-column-width:20px;
    -moz-column-width:20px;
}
li {
    display:inline;
}
div{
    width:120px;
}

Check this http://jsfiddle.net/rJTGJ/2/


    CSS Howto..

    How can I control my

    styling in another styling?

    How to align lists to top right?

    How to remove CSS and JS from a certain content-type in Drupal 7

    CSS - how to keep images within container during browser window resize?

    How to apply text rotation in CSS?

    How automatically adjust div's width using CSS?

    How to get rid of duplicating image when applying own style to Radio/CheckButtons in GTK with CSS?

    How to make a CSS mega menu be on the full width of the page? (998px, but in the middle?)

    How to hide a div from another div using CSS

    How to make my dynamic table scrollable when mouse clicked?

    How can I have floated list items display their bullet in IE7?

    How to make div's inside div responsive

    how to align the content to center of page using css

    Simple slideshow not working properly

    How to center an unordered list?

    How to set image height 90 % of whole page height (not viewport)

    how to force 100% height on a dynamic drive css fluid/fixed layout

    How can I create left & right side fixed width elements with a center that fills the remainder?

    CSS newbie: How to align my link to the right side of the page?

    Showing and hiding content

    How did he get the sidebar to remain on the left, even as the right side of the page can scroll?

    How to add & show 4d image in web site with css

    How to insert variables in inline CSS rules with pure JavaScript?

    Css overflow-y: how to show only when needed

    How to make information appear only when hovered over using jquery and css?

    How to use Image instead of border-right with CSS in Wordpress?

    CSS: How to change class style if another style is hover

    How to solve outlook client css layout change properties?

    How to implement image sticker (ribbon) with css3

    How do I insert an image in HTML so that its fills up the entire screen regardless of screen size?