I’m talking of course about Brian Wilson’s Index DOT Html and Index DOT Css sites. I have been using these sites over the past 8+ or so years as one of my primary resources when it comes to Web Development. They document the majority of the HTML and CSS elements and properties, how they work and what browsers support them (and to what degree) – complete with browser specific tips and notes.

The sites may not be up to date with Firefox 3 and Internet Explorer 7 or 8, but the information they provide is still very relevant and still very useful. They’re always my first stop when I need to look up a particular HTML element or CSS property, and to be honest I don’t know where I would turn if they weren’t around for me to use. I suppose I owe Brian Wilson an enormous thank you for all his hard work and dedication to the sites, and I’m pretty sure that there are many others out there who owe the same as well.

Brian, thank you for two of the most useful resources available on the Internet over the past decade or so.

Well, I’ve since run in to a situation that using float: left wasn’t working for me (try centering a set of divs that have float: left – it’s a pain!), so I had to find some kind of way to use inline-block.  Thankfully, Internet Explorer 8 and Firefox 3 support inline-block now, but we still have to deal with those hard-headed users that take forever (or never) to upgrade their browsers.  To accomodate Internet Explorer 7 and Firefox 2 we have to use some CSS hacks (what else is new!); thankfully they’re not that bad (but it still invalidates your CSS… bummer).

First, you must make sure that you do not throw the browser in to quirks mode, otherwise it won’t work just right.  This means specifying a proper DOCTYPE on your document (and if you’re using XHTML, don’t include the <?xml … ?> tag at the top).  Once you have that out of the way, it’s just a little bit of CSS to add to the element(s) you want to display as inline-block:


display: -moz-inline-box;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: top;


The first line sets a special Firefox property that we need for Firefox 2. The second line obviously sets the display to inline-block (and Firefox 2 will ignore this setting since it doesn’t understand inline-block). The third sets an IE-only property called zoom to a default 1 (no zoom) which triggers a switch in Internet Explorer 7 to enable hasLayout which allows the divs (which are block elements by default) to inherit inline display features. The fourth line re-sets the display to inline for Internet Explorer 7 to get the final effect we’re looking for. The last line fixes part of the word spacing problem we’re about to mention below.

As mentioned, there’s still one small problem which you may notice – inline items get word spacing applied to them because they’re now inline elements. That means that any space between your div tags will show up in your layout (even newlines!).  If you’re trying to get your div blocks to sit side by side without any spacing, you’re probably pulling your hair out because of this spacing.  There’s two fixes for it – the first is to simply get rid of it, though this usually means killing any readability in your back-end programming (if any is used) and mushing all your HTML code together in to one long line which sucks too.  The second way to fix it is with a bit more CSS around the container in which all these divs are in:


word-spacing: -1em;


That line of CSS sets the word-spacing to -1em, which is like doing a backspace of 1 character to get rid of the blank space caused by any white space or newlines between your divs. The vertical-align: top CSS we already added to the individual divs gets rid of the spacing between the divs above and below, but it doesn’t fix the spacing to the left or right. By adding a negative word-spacing, we get rid of the spacing on either side of our divs which gets rid of the last of our problems.

There you have it – a cross-browser inline-block CSS solution, and even a fix for any erroneous spaces in your HTML markup that you probably won’t want either. I haven’t tested these fixes in Internet Explorer 6 for a few reasons; I refuse to code for Internet Explorer 6 any more since the browser is so old and Internet Explorer 8 is now officially released so users really should upgrade.