I love spring. Spring is the time of year where everything is new, where you get everything set up clean, orderly, and put all your ducks right into a row. It makes me horrendously sappy (something that I am guilty of all year around anyway), and I view life with rose-colored glasses. I like everything in it's place, despite the fact that you would never think that about me if you took one foot into my apartment. But I promise that every pile of books has some semblance of order - okay, not really.
I like order, though, even if I'm bad at it when it comes to housekeeping. I like everything neatly lined up in a row, especially when it comes to my computer, and even more especially when it comes to design and cutting websites.
Usually I leave posts like the one I'm writing to Kyle because he tends to go about things in a much more humorous and engaging manner than I do. However, in this case since I discovered the issue, he sweetly decided not to write about it so I could fill in any empty spot on my blog.
Back in December, Kyle made a post on the Mindfly blog that would change the way we cut websites forever. Like everyone else, when making a columned design (as most are), we would take our elements, put them in their place, slap a wrapper around them, float them left or right and hope to god that we could get them to work in all the browsers in under 10 hours of fiddling with sizes in IE6 (Side-note: For everyone else out there who hates IE6 as much as I do, please do this).
Now that we use inline-block to set up our columns (and I can manage a 3-column design with no wrapper, are you not impressed?!), we've solved almost all our issues with the other browsers, dealing with floats (much less often), and getting things to line up in a nice, neat, level row. Check out vertical-align with inline-block if you are wondering what I'm talking about. Or for God's sake, just read Kyle's post.
Unfortunately, using inline-block doesn't mean that we get rid of floats altogether. And when we do use them, well, I don't know about you... but I hate adding an extra div just to clear a float. So I often cheat with overflow: hidden. It's never given me any problems before, and it's unfortunate, but I can't say that now...
While working on a site for a client and almost pulling all of my hair out (of which I have a lot of hair, mind you), I managed to discover an unfortunate bug in using inline-block with floated elements. Or, specifically, using inline-block with overflow: hidden.
Take a look at the following example. Due to the inline-block on the LI elements (you can see this by viewing source and taking a peek at the CSS inside it), they should be nicely following each other in a neat little row (as you can see here without it). The width of the UL is 390px and the width of the LIs are 130px, fitting in there with some adjustments to word-spacing as inline-block pays attention to white space. They should fit. But they don't. The reason for this is that somehow, somewhere, applying overflow: hidden to an inline-block element (which the UL has. For no reason other than testing here, but often my primary content will have an overflow: hidden to clear floated elements and, well, if you're looking for the fix, you can probably see the uses) changes the width of the element to be smaller than it actually is, forcing it's children to not fill the full space.
Why does this occur? I have no bloody idea. I've checked google for pages and have no clue as to what's going on.
How do you fix it? Unfortunately, extra mark-up. If you don't need the overflow: hidden on there and just slapped it in just in case (another bad habit I'm notorious for), then just remove it. If you do need to clear your floats, then a <div class="clear"></div> with the css:
.clear
{
height : 1px;
clear : both;
}
Then that should fix your problem.