I'm trying to create a list of items that would look like this:

Main requirement is that the list should be flexible in a way that it's possible to add or remove list items without touching the code.

The best solution I found so far is to put all list items (including headers) into the <li> tags and style them with one of the techniques presented in this A List Apart article:

<ul>
  <li class="header">Drinks</li>
  <li>Drink 1</li>
  <li>Drink 2</li>
  <li>Drink 3</li>
  <li class="header">Meat</li>
  <li>Meat 1</li>
  <li>Meat 2</li>
  <li>Meat 3</li>
  <li>Meat 4</li>
  <li>Meat 5</li>
  <li>Meat 6</li>
  etc.
</ul>

I was wondering if there are some better suggestions here on Stack Overflow.

I'm trying to create a list of items that would look like this:

Main requirement is that the list should be flexible in a way that it's possible to add or remove list items without touching the code.

The best solution I found so far is to put all list items (including headers) into the <li> tags and style them with one of the techniques presented in this A List Apart article:

<ul>
  <li class="header">Drinks</li>
  <li>Drink 1</li>
  <li>Drink 2</li>
  <li>Drink 3</li>
  <li class="header">Meat</li>
  <li>Meat 1</li>
  <li>Meat 2</li>
  <li>Meat 3</li>
  <li>Meat 4</li>
  <li>Meat 5</li>
  <li>Meat 6</li>
  etc.
</ul>

I was wondering if there are some better suggestions here on Stack Overflow.

• javascript
• jquery
• html
• css

• Also have a look at masonry – mplungjan Commented Jul 9, 2012 at 10:10
• Will all the items be the same height? How much pre-processing can you do (PHP etc)? This is a tough one, HTML and CSS have never been made to acmodate fixed height layouts, in fact, just the opposite; The specs were designed to encourage either fixed or fluid width layouts that wrapped and pensated in height to any length of content. Having a fixed height div (so wrapping bottom to top as opposed to right to left) is sort of contrary to that. It still CAN be totally possible! But that's entirely dependent on your requirements for the situation. – Sandy Gifford Commented Jul 9, 2012 at 10:11
• @mplungjan Looks interesting, thanks, I'll take a look. – finspin Commented Jul 9, 2012 at 10:25
• @SandyGifford do you mean the <li> items? Yes, they will be the same height. I have basically total control of pre-processing so I can generate data in any format (using Django/Python). – finspin Commented Jul 9, 2012 at 10:27
• I've added an answer below that does NOT depend on browsers having support for any CSS or javascript. It's in PHP (I'm not familiar with Django or Python on the server side) but it shouldn't be hard to translate. – Sandy Gifford Commented Jul 9, 2012 at 10:58

6 Answers 6

Probably the only way you can achieve this cleanly (without javascript) is using the column-count CSS property. IE only supports it from 10+ though: http://caniuse./multicolumn

Here's a demo: http://jsbin./efiqov/2/

Also, headers should be headers, not list items.

As long as you don't need to support older browsers you can just use CSS3 multi-columns...

http://www.quirksmode/css/multicolumn.html

Then just use an unordered lists for each category.

You can easily overe this with css3 multi-colum. And for ie browsers you can use script too. see the link for more details

http://www.cvwdesign./txp/article/360/multi-column-layout-with-css3-and-some-javascript

Since you have the plete ability to do pre-processing AND have fixed height <li>'s consider the following in PHP:

$menu=array(
    "header" => "Drinks",
    "item" => "Drink 1",
    "item" => "Drink 2",
    "item" => "Drink 3",
    "item" => "Drink 4",
    "header" => "Meats",
    "item" => "Meat 1",
    "item" => "Meat 2",
    "item" => "Meat 3",
    "item" => "Meat 4"
);

$item_count = 0;
$items_per_column = 5;

echo "<ul>";
foreach($menu as $key=>$value)
{
    if($item_count % $items_per_column == 0)
    {
        echo "</ul><ul>";
    }

    $item_count ++;

    echo "<li class='".$key."'>".$value."</li>";
}
echo "</ul>";

That's untested, but SHOULD work just fine. Just give each <ul> a float: left and they'll stack next to eachother.

Fundamentally this is all you need, no css3, js, or php, works in any version of any browser, etc.

Four columns

li {width: 25%; float: left;}

<ul>
<li>content</li>
<li>content</li> etc.
</ul>

Three columns

li {width: 33%; float: left;}

<ul>
<li>content</li>
<li>content</li> etc.
</ul>

Etc.

Less is more, embrace simplicity!

You can do this really easily with the jQuery-Columns Plugin for example to split a ul with a class of .mylist into 5 columns you would do

$(document).ready( function () {
  $('.mylist').cols(5);
});

Here's a live example on jsfiddle