Align List Items Horizontally with CSS ...

... or: "Cross Browser display:inline-block".

If you ever wanted to display a list of items horizontally with a wrap around once the right margin of your page has been reached, you came across a float:left solution. And if you ever tried to line up items with different heights this way, you know how messy things can get... Here's an example:

The Problem

Well, yeah... not exactly what you wanted, I guess... It would be nice to have something similar to this:

The Solution

Usually at this point you stop bothering and use a table, right? ;-) But what about liquid layouts? It would be nice to have "something" that can do the trick with a simple unordered list (ul).

Actually, CSS has a solution for this problem: setting the item to display:inline-block will do. There's just one minor problem. inline-block is currently only supported by Safari and Opera in a usable way. There are workarounds for Internet Explorer and Firefox. The one for Firefox is extremely buggy, especially when it comes to manually setting the width of an item or when wrapped text should be supported.

I combined the workarounds and found a way to deal with fixed widths of items which results in a cross browser solution for the problem. Check out the demo.

Lets have a deeper look into the six tests of the demo page. All tests are using the exact same markup for the lists - no quirks here ;-).

Test 1: Floated

Just a demo of what we do not want...

Test 2: Standards compliant

With display:inline-block elements get a layout as if they were display:inline, but at the same time they can contain display:block elements. Here are the CSS rules:

#test2 li { display:inline-block; width:60px; vertical-align:top; 
              overflow:hidden; }

When setting the "li" elements of our list to this display type, we exactly get the effect we want:

ib-fix-ok

Safari and Opera are fine with that - Internet Explorer and Firefox are not... They still display our items as regular block elements.

Test 3: Internet Explorer 6 and 7

Bruno (Fassino?) presents a way to force Internet Explorer 6 to display an element as inline-block. After it has been set to display:inline-block, you overwrite the rule with a second rule to display:inline - and it will do. Yeah I know that's sounds strange, but it works. I'm using two different CSS filters to also support IE 7:

#test3 li { display:inline-block; width:60px; vertical-align:top; 
            overflow:hidden; word-wrap:break-word; }
* html #test3 li { display:inline; }  /* for IE 6 */
* + html #test3 li { display:inline; }  /* for IE 7 */

Test 4: Firefox?

Firefox. Hmhm. Firefox... Well, Firefox doesn't know inline-block at all. Nicholas C. Zakas describes the problem and suggests to use -moz-inline-stack instead. Right. -moz-xxx stuff. We have to dive deep into the Firefox/XUL internals to find a solution. Stacked elements however are not what we want - we want block elements inside our inline-block. Hence most of the time -moz-inline-box is suggested. The default alignment for elements of a -moz-inline-box however is horizontally. -moz-box-align:vertical helps us here:

#test4 li { display:-moz-inline-box; display:inline-block; 
            width:60px; vertical-align:top; overflow:hidden; }

But wait - when setting the width of the items (with overflow:hidden), the layout completely collapses:

ib-fix-ff-broken

Apparently -moz-inline-box doesn't like to have a fixed width and a hidden overflow...

Test 5: Firefox!

So we set the width to the child elements of the list items. This means that only block level elements are allowed to be children of a list item. Not that much of a restriction...

#test5 li { display:-moz-inline-box; -moz-box-orient:vertical;
            display:inline-block; vertical-align:top; }
#test5 li > * { display:table; table-layout:fixed; width:60px; overflow:hidden; }

Yeeha - that does the trick!

Test 6: Combining the magic

Loads of browser specific stuff. Here's how I combined the rules in order to make the layout work cross browser, i.e. in Internet Explorer, Firefox, Safari and Opera:

#test6 li { display:-moz-inline-box; -moz-box-orient:vertical;
            display:inline-block; vertical-align:top; word-wrap:break-word; }
* html #test6 li { display:inline; }
* + html #test6 li { display:inline; }
* html #test6 li { width:60px; }
#test6 li > * { display:table; table-layout:fixed; width:60px; overflow:hidden; }

Enough chit chat! How do I use it?

Woa - you read up to here! Here's a simple way to use the solution. Hack together some markup similar to this:

  <ul class="ib-fix demo-ul"><!--
   --><li><p>Resize your browser window ...</p></li><!--
   --><li><p>... to see what happens with the elements ...</p></li><!--
   --><li><p>... in this list.</p></li><!--
 --></ul>

The HTML comments are required in order not to have any white spaces inside the "critical section" - we are dealing with inline elements here... See also the limitations section.

Now, add the following ib-fix ("inline-block-fix") class rules to your style sheet:

  .ib-fix li { display:-moz-inline-box; -moz-box-orient:vertical;
               display:inline-block; vertical-align:top; word-wrap:break-word; }
  * html .ib-fix li { display:inline; }
  * + html .ib-fix li { display:inline; }
  .ib-fix li > * { display:table; table-layout:fixed; overflow:hidden; }

And set the width of your items via something similar to this:

* html .demo-ul li { width:80px; }   /* for IE 6 */
.demo-ul li > * { width:80px; }      /* for all other browser */

That's it - happy aligning.

Limitations

  • Always keep in mind that you are dealing with inline elements. As opposed to block level elements, spaces between inline elements are displayed.
  • The children of a ib-fix layouted element have to be block level elements, i.e. must not be text children.
  • When modifying the DOM via JavaScript, use a single wrapper DIV as the child of your item - otherwise Firefox will insert strange new lines...

Trackback URL for this post:

http://www.ruzee.com/trackback/138

word-wrap:break-word

You have saved my day!
I have used word-wrap in IE7, but I had a space between 2 columns. Overflow:hiddded did the trick.

Thanks!

Thanks a lot, mate! Worked like a

Thanks a lot, mate! Worked like a charm, the only thing I had to add to my CSS was
UL, LI {margin:0px;padding:0px;}

Thanks Steffen, what a time

Thanks Steffen, what a time saver!
Praying for the day of one-code-fits-all browsers.
Cheers

Thanks a lot, works like a charm. i

Thanks a lot, works like a charm.
i spent meny hours playing with differnt combination in css for ie6/7 and ff2/3.

CSS "Cascading Style Sheets"

CSS "Cascading Style Sheets" Lessons
css list style Properties and examples -- http://css-lessons.ucoz.com/list-css-examples.htm

By the way, this is where I used

By the way, this is where I used it:
http://designmuseumshop.com/whats-new

Also works in FF3 without touching it. As a word of warning: It took a LOT of hacking to get everything right (note how the source code is in one single line for each item, because the white space was playing tricks on me)

Thanks again,
Matthias

[...] than trying to explain the

[...] than trying to explain the benefits of this, here’s a real-world example: Align List Items Horizontally with CSS. inline-table behaves in a similar way, only with tables (obviously), making it slightly less [...]

This is seriously awesome work. Thank

This is seriously awesome work. Thank You. Can’t wait until Firefox releases 3.0 with support for display:inline-block.

This is seriously awesome work. Thank

This is seriously awesome work. Thank You. Can't wait until Firefox releases 3.0 with support for display:inline-block.

Hello, I found the

Hello,

I found the display:-moz-inline-box; -moz-box-orient:vertical; seems to make my images expand to the full width of the , so they become stretched. Is there any way around this?

Cheers

I had the same problem, but since it

I had the same problem, but since it was an internal application I just changed to minimum requirements to IE7 and FF3 Minefield.

However I had the same problem with not allowing whitespace. What I did was to shrink the text in the parent and reexpand on the child elements.

#parent { font-size: 1px; letter-spacing: -1px }
.child { font-size: medium; letter-spacing: normal; }

The problem is that IE7 ignores the spaces so the negative letter-spacing doesn't move anything any closer together in IE7. But in FF3 it shrinks the space down to 1px and since there is a letter the letter spacing does move them closer and eliminate the gap.

The browser specific stylesheet that another commenter used for IE is also a good idea since conditional comments still validate. But this is a pure CSS solution that I feel is extremely clean.

you've saved my day with this hack -

you've saved my day with this hack - thanks.

For example: lkjkdjsfjack aSame

For example:
<span style="width:700px;border:blue 1px solid;" id="jack">
<span>lkjkdjsf<div>jack</div></span>
<span style="width:200px;height:18px;border:red 1px solid;" id="ppp">aSame appearance in ie and firefox</span>
bbbbb
<span style="width:200px;height:28px;border:red 1px solid;">ie and firefox</span>cccc<br>
<span style="width:150px;height:18px;border:red 1px solid;">ie and firefox</span>
</span>

{var b =

{var b = document.createElement("span");
b.innerHTML = htmlspecialchars(a[i].nodeValue);
a[i].parentNode.replaceChild(b, a[i]);
}
}
}
}
}

if

if (all_span[j].getElementsByTagName('span').length>0
&& all_span[j].childNodes.length-all_span[j].getElementsByTagName('span').length>0
)
{var a=all_span[j].childNodes;
for (var i=0;i<a.length;++i)
{if (a[i].nodeName=='#text' && trim(a[i].nodeValue)!='')

function ib_fix() {var

function ib_fix()
{var all_span=document.getElementsByTagName('span');
for (var j=0;j<all_span.length;++j)
{if (all_span[j].parentNode.tagName!='SPAN' && all_span[j].getElementsByTagName('span').length==0
&& all_span[j].style.cssFloat!='left' && all_span[j].style.styleFloat!='left'
)
{typeof(all_span[j].style.cssFloat)!='undefined' ? (all_span[j].style.cssFloat='none'):(all_span[j].style.styleFloat='none');
}

function ib_fix() {var

function ib_fix()
{var all_span=document.getElementsByTagName('span');
for (var j=0;j

function htmlspecialchars(str)

function htmlspecialchars(str)
{return str.replace(//g, ">");
}
function trim(str)
{return str.replace(/(^[\r\n\t ]*|[\r\n\t ]*$)/g, '');
}

if(window.addEventListener)

if(window.addEventListener)
{window.addEventListener('load', ib_fix, false);
}
else
{window.attachEvent('onload', ib_fix);
}

A javascript fixing with the second

A javascript fixing with the second solution:

In fact, i'm always looking for an

In fact, i'm always looking for an inline-block layout solution.
Although "inline-block" is supported is firfox 3 beta,
but with most people using firefox 2,
what i can only do is to coin an alternative method.

First, this:
span{display:-moz-inline-box;display:inline-block;vertical-align:middle;overflow:visible;cursor:default;}

Recently, this:
span{float:left;vertical-align:middle;overflow:hidden;cursor:default;}br{clear:left;}

I just had a look at your solution and

I just had a look at your solution and at diyism's, and I couldn't control the width of things as well as overflowing content in his version, even when applied to child containers.

Other than that I'm really torn about using your solution. On one hand it does work for me (with more complex content, I have a div-wrapped image, an h3 and a p in the li), on the other hand I feel it lacks stability. I tested it in a more recent nightly build of Webkit and it worked, but will it work in Firefox 3?
I'm also not fond of the comments to prevent whitespace, but figured that all browsers I tested do display the whitespace in equal width, well, all except IE. As I have a tiny IE-only css anyway (using conditional comments), this does not pose a problem, and it loosens the restrictions a little. Finally, thanks for sharing your solution, it did help me a lot.

Your solution is too complex, look at

Your solution is too complex, look at this:

span{display:-moz-inline-box;display:inline-block;vertical-align:middle;overflow:visible;cursor:default;}

aSame appearance in ie and firefox
ie and firefox
ie and firefox

[...] Align List Items Horizontally

[...] Align List Items Horizontally with CSS If you ever wanted to display a list of items horizontally with a wrap around once the right margin of your page has been reached, you came across a float:left solution. And if you ever tried to line up items with different heights this way, you know how messy things can get. This article delivers an easy solution of this problem. [...]

[...] display: inline-block cross

[...] display: inline-block cross browser A nifty way of aligning list items horizontally (tags: css inline list align) [...]

[...] Align List Items Horizontally

[...] Align List Items Horizontally with CSS If you ever wanted to display a list of items horizontally with a wrap around once the right margin of your page has been reached, you came across a float:left solution. And if you ever tried to line up items with different heights this way, you know how messy things can get. This article delivers an easy solution of this problem. [...]

[...] Align List Items Horizontally

[...] Align List Items Horizontally with CSS If you ever wanted to display a list of items horizontally with a wrap around once the right margin of your page has been reached, you came across a float:left solution. And if you ever tried to line up items with different heights this way, you know how messy things can get. This article delivers an easy solution of this problem. [...]

[...] Align List Items Horizontally

[...] Align List Items Horizontally with CSS If you ever wanted to display a list of items horizontally with a wrap around once the right margin of your page has been reached, you came across a float:left solution. And if you ever tried to line up items with different heights this way, you know how messy things can get. This article delivers an easy solution of this problem. [...]

[...] Align List Items Horizontally

[...] Align List Items Horizontally with CSS If you ever wanted to display a list of items horizontally with a wrap around once the right margin of your page has been reached, you came across a float:left solution. And if you ever tried to line up items with different heights this way, you know how messy things can get. This article delivers an easy solution of this problem. [...]