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 change image size when nested in

    tag

    Javascript Slider not showing and Graph tips

    How to verify that google web font is working or not?

    How to convert this CSS to SASS (arithmetics in selector)?

    how to place content to the right of the fixed img with css 100% height (no width given)

    CSS HTML : stumped on how to center this piece of text

    How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li

    How to create folder style in CSS

    How to make a search bar clippable without pushing down elements, using 2 inputs

    How to make mobile menu transition “backwards”?

    How to change CSS property with jQuery?

    How can I create inline CSS in a WordPress PHP file without referencing to an external CSS file?

    How to use CSS selectors to retrieve specific links lying in some class using BeautifulSoup?

    CSS How to keep bodies of html file and included files from merging?

    Show bootstrap glyphicon in link when hovering

    how does CSS determine which way to animate a transition?

    How to move a span after an img?

    how to change a css of an input if the value of it is not empty in angularJS

    How to crop an image edge

    How To Apply CSS rule to Classes with Specific Keywords Inside Them?

    How to convert a css only megamenu to jquery based

    CSS dropdown menu not showing the full texts of submenu items

    Showing a time countdown progress bar

    How to prevent default Css scroll onclick and allow javascript event only?

    How can i include label-info from twitter boostrap in my own class definition?

    How to change the background colour's opacity in CSS [duplicate]

    How to align DIV right or left or center in CSS without absolute positioning?

    how to access anti aliasing method of a font with CSS

    How to disable css transition for specific line of css?

    how to show ng-repeat horizontal?