How to display a list in two rows?


Tags: css,css3,html-lists

Problem :

I have a list of items that I want to fit in a space that is constrained vertically:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

Since I don't want the list to have more than a specific height, but I'm free to expan it horizontally, I want to divide the list into columns, like this:

One    Two     Three
Four   Five    Six

Or, alternatively (in my case order is not important)

One    Three   Five
Two    Four    Six

The css property column-count allows to break a list into columns, but it only accepts a fixed number of columns. I don't know the number of items I am going to have (it can go from 1 to more than 40), so if I set the number of columns to 3, any list with more than 6 items will be too high, and if there is only 4 items, then only the first column will have two items and it will look uneven.

So, ideally I would need a row-count property, but it doesn't exist. I guess I can do that in Javascript too but I'm looking for a CSS-only solution.

I tried something: float:left on every li puts the list in one row. To break it into two rows, I would need to not apply float:left to the N/2 element. I don't know how to do that.

I know also that I can do it by breaking it into multiple ul, each one with two li, and float:left them, but I would like to avoid messing the HTML for something entirely presentational.

Does someone has a solution for this problem?

Edit: I think I have not been clear in explaining my requirements. I want the list to be sorted into columns without knowing how many items I'm going to have, and so that I will always have two rows.

So for example with 7 items, I want to have:

One    Two     Three   Four
Five   Six     Seven

And with 3 items:

One    Two
Three  


Solution :

Here is a simple way to do it using jquery. I know it is mentioned that a CSS way is needed, but this is just for future reference if anyone wants to refer to this question.

Get the number of LI items and divide it by the number of rows and set that value to column-count property.

Jquery

$(document).ready(function() {
var numitems =  $("#myList li").length;

$("ul#myList").css("column-count",Math.round(numitems/2));
});

CSS

ul {
  width: 900px;
}
li {
width: 75px;
height: 75px;
margin-top: 10px;
margin-right: 10px;
display: inline-block;
}

HTML

<ul id="myList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>    
</ul>

Fiddle here

EDIT:

Same implementation using simple javascript.

var ul = document.getElementById("myList");
var li = ul.getElementsByTagName("li");
var numItems = li.length;

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "ul { column-count: " + Math.round(numItems/2) + "; }";
document.body.appendChild(css);

You need to set the width of UL, because number of rows will depend on the width also even after setting the column-count. You can set it to 100% too, but then the number of rows will change based on the window size. To restrict the number of rows to 2, fixed width for UL may be required.


    CSS Howto..

    How to draw a horizontal line between two circles with css?

    How to reduce space between two words vertically in css/html

    show/hide will not load

    How to dynamically change the value of a CSS property inside a stylesheet?

    How to align an img and a carousel next to each other, with max-width of 1000px?

    How did infusion.com skew the elements? The CSS file does not seem to have skewing in it and the menu is also skewed

    How to set input text color, but not placeholder color, in IE11

    how to use dynamic css in jsp file base on param value

    How to move the icon / button outside the textbox x-webkit-speech?

    CSS - How to use “vertical-align : middle” with a table near an image?

    How to align social like buttons next to copyright text inside footer?

    How should I approach the solution to develope a static, Responsive HTML file that seems to have functionality beyond CSS/HTML capabilities?

    How do I modify IE Gradient CSS to use height and a third color?

    How to always show up pure HTML5/CSS modal window without clicking a link which activates it?

    How to set background url for css files in thymeleaf?

    How can I make a pointy arrow with a div in CSS

    CSS: How to define a centered div with endless vertical borders and an initial height of 100%?

    A plugin or tool to show what elements on a page are effecting other elements?

    How to create a sphere in css?

    Boostrap 3: how to force the content of layout columns to be of same height?

    JS/JQuery: How to switch class several times in a loop way?

    How to move img src a few pixels down in html page

    How can I animate a table row with a single column that spans multiple columns?

    How to set browser full width navigation?

    How to make IE 9 work with Bootstrap Multiselect plugin by davidstutz?

    How to put images to the right and text to the left in css

    On click show or hide the children links in javascript or jquery

    “ul li a:link, a:visited” and “ul li a, visited” how they different?

    How can I remove the border around an image without a source?

    How do I select text after a

    tag, but before a nested tag?