You are reading...

September 9th

Down with floats! Build your layouts and galleries with a more flexible CSS property.

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.

Go home
  • Pingback: Making Peace with IE :: Are you Insane? My thoughts… unmedicated.

  • Alex

    This trick takes advantage of a bug in IE’s hasLayout property. If you apply display:inline-block to a block level element, it turns on IE’s ‘hasLayout’ property for that element. If you later set it back to display:inline, IE leaves ‘hasLayout’ on the element.

    http://www.tanfa.co.uk/archives/show.asp?var=300

  • Alex

    This trick takes advantage of a bug in IE’s hasLayout property. If you apply display:inline-block to a block level element, it turns on IE’s ‘hasLayout’ property for that element. If you later set it back to display:inline, IE leaves ‘hasLayout’ on the element.

    http://www.tanfa.co.uk/archives/show.asp?var=300

  • http://areyoudesign.com/ Sai-Kit Hui

    Thanks for the info. Now is there a better way to get rid of the “gap” between inline-block elements without resorting to floats?

  • http://areyoudesign.com Sai-Kit Hui

    Thanks for the info. Now is there a better way to get rid of the “gap” between inline-block elements without resorting to floats?

  • http://grafiko.ro/ Grafiko

    Thanks, this realy works, cros browser, tested in ie 6,7, opera 6.4, chrome, firefox 3.0.8 . a realy perfect alternative to floats witch give’s me a lot of headeach.

    PS: sory for my english.

  • http://grafiko.ro Grafiko

    Thanks, this realy works, cros browser, tested in ie 6,7, opera 6.4, chrome, firefox 3.0.8 . a realy perfect alternative to floats witch give’s me a lot of headeach.

    PS: sory for my english.