Fighting the Space Between Inline Block Elements

Formatting links as a series of inline-block elements is an easy way to center align stuff e.g. a navigation menu. There’s one annoying issue and that’s the blank spaces that appear between elements. This article has several code examples that will remove the blank spaces from inline-block elements…

What’s the Deal With Display: Inline-Block?

One interesting alternative to floats that people are turning to more and more lately is to set the display value of an element to inline-block. What does this do exactly? How is it like a float? How is it different? Let’s dive in and see what we can discover…

inline-block vs float

With display:inline-block finally ready for everyday use across the most popular browsers (in all honesty, it has been for a while now), I quickly hit a pretty big dilemma. When comparing inline-block to floats, it wasn’t immediately clear what the exact differences were and what method to prefer. I looked online but couldn’t find a source listing the difference between the two. Guess that’s a good reason for keeping a blog then.

Note that inline-block still needs fixes in IE6 and IE7 (more about that later this week) and isn’t supported in FireFox versions prior to FF3. There is a -moz fix if you still want to support these browsers though. Apart from those (easy to fix) issues, you can play around with it all you like…