My Tetris skills gained as a youth have proved fairly useful in my life (unlike doing advanced math without a calculator, which is a situation I've yet to find myself in), allowing me among other things to do the young adult game of "how do I fit my furniture in my tiny apartment?" and the even more exciting game of "how do I fit my furniture in my friend's van?" Also, on the day that the Earth's survival depends on filling up rows of blocks in a small rectangular space, won't the military look silly when they have to ask me for my help?
Sadly, Tetris is of almost no use in helping fit columns of content next to each other in web design with CSS. For whatever reason the early masters of making pages pretty failed to consider how often there's a good reason to have multiple columns of text, images, or squirrels horizontally stacked. So for more than a decade we've labored with using tricks like floats and clearing them to make two, three, or more column designs a reality.
I hate relying on floats. I've talked about this. They're messy, and create all sorts of potential headaches. Fortunately, now we have better solutions, such as using display:inline-block to do what previously seemed impossible: have a block of content... that displays inline.
I know. It's amazing. I'll let you wipe your tears of joy away.
This is a topic I've discussed in the past, but there's been little annoyances that have slowed down my adoption of this technique into being used in all my designs, despite my loathing for float and all it's abuses. Here are inline-block's problems:
1. IE6 and IE7 don't support it.
2. It leaves a space between the inline-block elements.
Fortunately, as I've mentioned prior, #1 is easily correctable. Go read up here to see how to make IE6/7 play nice.
Problem #2 seemed solved when I found that word-spacing impacted the space between inline-blocks. Unfortunately, I learned that Webkit is something of a jerk when it comes to this. For whatever reason, they decided not to allow word-spacing to affect inline-block spaces, resulting in a situation where most of your browsers played along, but it was Safari and Chrome that were causing browser compatibility issues. You can see what I'm talking about here (check it in any other major browser, then in Safari or Chrome.)
I know, right?
I was working on writing a stern letter to their mothers when Jeff Moyes commented in my blog on a solution here. I'd like to thank Jeff. I'd also like to get the word out. You can use inline-block safely! Go, be free!
Here's the solution, and it's very simple:
1. On the container holding your inline-block elements, give it font-size: 0.
2. Inside the inline-blocks, reset your font-size to its appropriate amount (warning, ems won't work, since 1em of 0 is still 0, so it needs to be reset in pixels.)
It actually is just that easy. I've got a new test page here that'll show correctly in all your browsers (well, this one doesn't include the IE6/7 fix, but that's compatible with this solution). It's annoying that we have to resort to this trick (Webkit guys, please fix, kthx), but at least we HAVE a solution.
So go out my young padawans, and spread the gospel of inline-block. And if you have a cleaner solution to that little gutter problem, let me know, ok?
