Inline-Block and Banging my Head Against Liquid Layouts
Posted by Kyle Weems on May 30, 2008Firefox 3 will have display: inline-block. Hooray! I always felt this was a great way to do things like hyperlink buttons and such without having to worry about all the floating nonsense needed to get a block in certain locations. Thankfully now all the major browsers will have it.
I spent an ungodly amount of time yesterday trying to concoct a method to doing liquid column layouts without an extra wrapper element, and somewhere along the way my brain started hurting a lot. It keeps feeling to me that there’s somehow a way to trim the markup down to just the one element each per column, but it keeps barely escaping me. I was hoping inline-block would prove the key to this, but so far I’ve had no luck.
One of my thousands of permutations of CSS worked only in Opera (which I found odd), and another in IE (which didn’t surprise me, as it’s always ’special’), but as of yet nothing has produced what I desire for Firefox and Safari. Yes, I could get two elements to nest next to each other, yes I can get one to sit on one side of the screen at a fixed width. The problem is that although I can have the remaining column adjust it’s minimum size based on the width of the parent and otherwise be elastic, I couldn’t get it to expand to fill the width of the space on it’s own (rather than, say, because it has a paragraph inside it that pushes it’s borders out to fill the space it’s in).
I’m guessing there’s a reason the negative-margin layout (aka this) is still around.
I haven’t given up hope yet, but I’m beginning to hit a wall here and suspecting that it’s just not going to happen. So I’ll ask, has anyone had any luck doing a two-column liquid layout design with CSS without resorting to a wrapper element for one of the divs (aka, standard negative margin layout)? To increase the difficulty rating, a footer would need to be beneath the columns (so you can’t just use absolute positioning) and the solution can’t use javascript.
Tags: inline-block, rant
I think you’re looking for “The One True Layout”, which uses negative margins but no wrapper divs. See http://www.positioniseverything.net/articles/onetruelayout/.
It’s also a hack, albeit one with a little less markup, but absent any real grid-layout system, we’re pretty much stuck with hacks, all the way down.
Thanks for the link! Although, after giving it a look, it appears this technique is fraught with a few perils, and possibly a good deal more headache, than just swallowing the pill and using a wrapper.
CSS3 spec approval/implementation could accelerate whenever it wants. Really.