... 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:

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

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.