CSSquirrel A look at web development and web design by Kyle Weems

This is a quick sanity check, if nothing else.

A while back, I found a way to make my inline-block spacing issues go away by getting tricky and using word-spacing to remove the gap, as discussed and tested here. I failed to check the results in a webkit browser, though, and recently discovered a slight problem.

Mainly, they don’t support that.

For whatever reason, IE, Firefox and Opera all apply word-spacing styling to inline-blocks, either adding to or removing the whitespace between the elements depending on your style. Safari and Chrome, however, do not. Mind you, they both have whitespace between the elements. They simply don’t allow the use of word-spacing to modify that space.

Here’s an example page showing the use of word-spacing with inline-blocks and normal sentances. Take a look in a webkit and non-webkit browser to notice the difference. (I didn’t bother to do IE 6&7 correction, so those browsers won’t show the lists side-by-side. Upgrade your browser already!)

As you’ll see, the webkit browser isn’t removing the whitespace.

So, the question is this: Does the w3c spec say what behavior is supposed to occur? Is the webkit result a bug/out-of-spec, or are the other browsers providing a result that isn’t required by the spec? It seems to me that the non-webkit result is the proper one. If you’re going to make blocks behave like words with spacing, you should be able to modify them in the same fashion. But then, there’s a lot about CSS that doesn’t always work like you think it should. (point in case: vertical-align. Probably the worst style ever.)

Columns or grids, whatever you’re calling your blocks of content that are stacked next to each other, you’ve often got an annoyance when working on a design. I’ve probably covered this topic something like six million times, as I for one am easily annoyed by unnecessary floats, but historically found myself using them way too much to make some sort of grid of blocks work out to make a designer’s dream a reality.

I don’t know why floats drive me bonkers. But they do. I feel like frequently they’re being used almost exclusively to solve problems that were never intended for them, and the end results can get messy as soon as a client starts using a carefully balanced page built upon delicate floats and adds an unexpected list or makes a given element too full or too empty.

Not terribly far back in the past I talked about display: inline-block, one of my favorite CSS style, as a solution to this problem at Mindfly in The Curious Case of Inline-Block. It provides a nice tutorial to getting columns of content to work side-by-side without floats using inline-block, and how thanks to the quick adoption rate of Firefox 3, all major browsers (including IE6) support this style (granted, IE6 & 7 actually require a helping hand, but the tutorial discusses the easy fix).

I had one problem that nagged at me, though. Whitespace. In particular, the inline-block style is whitespace sensitive, so normal markup practice will result in your columns getting space between them when you use this style, which can mess with your carefully measured columns, and so forth. One possible fix is to simply remove any whitespace between the elements in question, but this is impractical for two reasons: 1. A lot of dynamically generated content won’t be set up with that sort of issue in mind, and 2. Clients entering their own content.

So I did some digging around, and through a complete accident later stumbled upon word-spacing, a style I’ve never had cause to make use of in the past. It’s simple enough as a style goes. Give it a value (in px, em, etc) and that’s how it modifies the existing whitespace between words. This counts for space between inline-block elements as well. So if you give the parent of those elements word-spacing: -1em, then it will remove the whitespace (normally 1em) that is between your inline-block elements. The catch? Make sure to give the elements themselves word-spacing: normal to resest the spacing for any text inside them, or you’ll get some nasty results.

Here is an example of positioning items side-by-side cleanly by using word-spacing and inline-block together (as well as showing the IE6&7 fix). Of course, with the whitespace issue solved, you can add your own margins to elements to create whatever nice gutters and such that you prefer.

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