The gap between <li> s

Question

To avoid long lists, I have lithium installed to float: on the left so that they alternate strings. However, sometimes this leads to an unintentional gap between the elements when the content in li occupies two lines. My HTML:

<ul class="gmc-ingredient-list"> <li>500g Tagliatelle</li> <li>50g wortel</li> <li>50g ui</li> <li>50g bleekselderij</li> <li>100g pancetta</li> <li>200g half-om-half-gehakt</li> <li>200g rundergehakt</li> <li>200 ml Primitivo (rode wijn)</li> <li>200ml runderbouillon</li> <li>5 eetlepels tomatenpuree</li> <li>Olijfolie</li> <li>Zeezout</li> <li>Verse peper</li> </ul> 

My CSS:

 ul.gmc-ingredient-list { margin: 0; padding: 0; list-style: none; width: 300px; } ul.gmc-ingredient-list li { background: url(http://allesoveritaliaanseten.nl/wp-content/uploads/2012/11/aoie-list.png) no-repeat scroll left top transparent; list-style: none outside none; padding: 0px 0 0 20px; width: 130px; float: left; } 

And the result looks like http://allesoveritaliaanseten.nl/ragu-alla-bolognese/

But there are also some cases where li takes up two lines, and the result is just fine, like http://allesoveritaliaanseten.nl/italiaanse-tomatensoep/

How can I stop the list showing these spaces?

Answer 1

With css3 you can add columns to your lists

 ul.gmc-ingredient-list { margin: 0; padding:0; -moz-column-count: 2; -moz-column-gap: 0; -webkit-column-count: 2; -webkit-column-gap: 0; column-count: 2; column-gap: 0; width:300px; } ul.gmc-ingredient-list li { background: url(http://allesoveritaliaanseten.nl/wp-content/uploads/2012/11/aoie-list.png) no-repeat scroll left top transparent; list-style: none outside none; padding: 0px 0 0 20px; width:130px; } 

don't forget to remove float from li

Example: http://jsfiddle.net/LWBdp/3/

IE Issues CSS columns don't seem to work for IE if you leave a float: on the left it will look like you have it in IE, but it will look better in other browsers!

For more information on css columns, see w3schools article

Answer 2

I would recommend you use http://www.csscripting.com/css-multi-column/

I have been using this script for a long time and it is really effective compared to other available features. If your site is executed using AJAX, you will have to change this line: ut.XBrowserAddEventHandler (window, 'load', function () {documentReady = true; processElements ();});

EDIT: this solution works with any browser with IE6 ...