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 create CSS dropdown

    How to get an image from a css animation keyframe to remain on the page after complete [duplicate]

    How to serve static files for local development in Django 1.4

    jQuery - How to revert css changes when using slideToggle()?

    How to keep text in the middle of the screen even when re-sizing page in html/css

    Custom Javascript and css added to Wordpress, however, still not working

    How to increase checkboxes size with css which work in Google Chrome?

    How to Assemble HTML,CSS and JS with EachOther

    How do I apply a max-width to an input field form-control with a trailing secondary button in Bootstrap 3?

    How to handle an id tag with '.' in CSS

    Creating a calendar control using CSS: How to auto layout events

    How to draw diagonal lines with css [duplicate]

    How to do two border upon one div tag by css or by css3? [duplicate]

    How to keep Div rotated with css after flip?

    CSS: How to drill all the underlying layers up to the background?

    HTML / CSS How to add image icon to input type=“button”?

    How to Change blue background selection color from image using css

    How to remove the double border bottom line below the breadcrumb

    How to make vertical lines between list items using CSS?

    How to center smaller text with bigger css

    How to display a div next to another div with no width defined?

    Align lists on showing or hiding

    how to do drop down list

    how to edit the width of menu bar in dreamweaver

    How do I constraint an animation using only CSS and HTML?

    How to make this menu occupy all the remaining space's width?

    How to apply a class on
  • when mouse is hovering on it?
  • CSS: How to make element appear from left of the screen?

    Trying to show list items vertically but two items horizontally

    How to design resolution independent CSS elements?