Are you Insane?

Tucked away in Firefox 3.0′s new feature’s page is this nugget

The display property’s inline-block and inline-table values are now implemented.

Finally, every web developer’s favorite browser fully supports one of the best alternatives to floats. To implement inline-block a layout in a 2 column layout simply write:

.column1 {
width:40%;
display:inline-block;
vertical-align:top;

.column2 {
width:60%;
display:inline-block;
vertical-align:top;
}

Yes, you can use the vertical-align property. You will have to use this for column since the default vertical-align property is baseline. Not so useful in layouts, but great for galleries. Vertical alignment is relative to the line-height of the tallest sibling inline-block element. In addition to properties like top, bottom, or middle, you could also plug in a pixel length or a percentage, which would be relative to the bottom of the tallest sibling inline-block element.

There is a slight IE issue though. I believe in order for inline-block to work properly, IE has to think it is an inline element. So in your IE stylesheet, put this in:

.column {
display:inline;
}

If you don’t have an IE stylesheet. Get one. If you cannot get one, there is a bit of hackery involved. Add this in addition to the above codes.

#container > /* ie crap */ div {
display:inline-block;
}

This is assuming #container is the parent element of .column. Modern browsers would switch back to inline-block. IE, however, cannot read it if there is a comment in between the operator and the child element.

There is one issue I have encountered with inline-block. Simply put, 2x=y. But if x= inline-block element, 2x != y. The gap is around 4px and only way to remove it is to float the element, which, as you may already know, will cause a bunch of other issues. I have yet to figure why that is the case. But for now make 2x < y if you encounter this issue.

If there is one reason I use inline-block over floats for layout, this is it. While developing this blog, I switched over to IE6 to do my usual fixes. Guess how many layout issues I ended up having?

Zero.

I kid you not. All the pain of fixing IE6 issues. Gone. That would never have never happened if I were still using floats. No floats also means no more clear divs. No use of clear at all. No more overflow:hidden. Don’t need to set the width of every damn child element. No height:1% hacks. No hacks at all other than the one mentioned above.

In front-end web development, that means heaven.

Later, I will show you the power of inline-block, including building a gallery with horizontally and vertically aligned images.

Together, we can break the hold floats have on our web development lives.