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 simply write:
.column {
width:40%;
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. 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.
You can also use inline-block to build a next/previous bar.
.next, .prev {
display:inline-block;
width:50%;
}
.next {
text-align:left;
}
.previous {
text-align:right;
}There is one issue I have encountered with inline-block. Simply put, 2x=y. But if x= inline-block element. 2x != y. 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.
In front-end web development, that means we are in 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.
