The Problem: Many developers find themselves using floats to overcome the rightfully selfish properties of a div (block element). div elements don't like to be adjacent to anything else by default, whether or not there is plenty of room for neighbors. This is because divs are block elements (Default display: block) while more neighbor-friendly elements like spans are inline elements (Default display: inline). Though, inline elements are allowed to freely co-exist next to each other, they aren't allowed sometimes important properties like width and height. Floats are one solution but novice usually end up confused with the resulting mangled page. Reason: floated elements are taken out of the regular flow of the page. A wrapper with no set dimensions surrounding those floats will then usually collapse to the dimensions of its non-floated children or, if none exist, collapse to basically "nothing". Of course, you can clear the floats or set the wrapper to style overflow: auto, but many of the problems with floats in this forum seems to be because of the absence of those settings. Here's an Alternative: As browsers developed into more standard-compliant units (including IE) and added more support for CSS 2(2.1), other little used property values became available, namely, inline-blocks. Inline-block is supported by all major browsers including Firefox starting with version 3 and IE starting with version 8. To use it in the same way floats are commonly used, all you have to do is set the selfish divs that you want to be neighbors to display: inline-block;. This would give you some of the same effect as float: left;. A float: right; similar effect can be accomplished by doing the same and setting the wrapper to text-align: right;. Below is some code showing both the float method and the inline-block method: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> <style type="text/css"> /* Setting using inline-block { */ #wrapper1 > .inner { display: inline-block; vertical-align: top; } /* } */ /* Setting using floats { */ #wrapper2 { overflow: auto; } #wrapper2 > .inner { float: left; } /* } */ .inner { border-style: solid; border-width: 2px; border-color: black; width: 50px; height: 50px; } .wrapper { border-style: solid; border-width: 2px; border-color: red; } </style> </head> <body> <h1>Inline-Blocks</h1> <!-- Using inline-block --> <div id="wrapper1" class="wrapper"> <div class="inner">inline-block</div><div class="inner">inline-block</div><div class="inner">inline-block</div><div class="inner">inline-block</div><div class="inner">inline-block</div> </div> <h1>Floated Blocks</h1> <!-- Using float --> <div id="wrapper2" class="wrapper"> <div class="inner">float</div><div class="inner">float</div><div class="inner">float</div><div class="inner">float</div><div class="inner">float</div> </div> </body> </html> HTML: You can view the above in action by going here. IE 6/7 Compatibility: To get IE 6/7 compatibility, you would have to rely on an IE CSS hack and IE's hasLayout mode. Use IE conditionals to implement a IE specific stylesheet. Replace "display: inline-block" with "display: inline; zoom: 1;". Final Thoughts No solution is perfect and no solution is a complete replacement, but it never hurts to know more than one way to duplicate some functionality for common uses.
Inline blocks are useful, but in this case it makes much more sense to use floats... It is much more reliable to have styling that doesn't use hacks for IE 6/7, and as long as you use floats properly - you will never come across a problem. One method I like to use if always set display:inline on anything that I have floated. This, more often than not, helps IE to register that the element is floated and should be inline. Plus, the float attribute turns your element into a 'block' so you can apply height, and top and bottom margins. Always wrap the floats and make sure you clear them, by using another element to clear, or by setting the wrapper to overflow:hidden (or overflow:auto, I don't like to risk scroll bars popping up!).
I agree, floats work pretty well when used properly and do some things that are hard to duplicate sometimes, but it seems that most of my assistance posts have to do with someone using floats and not clearing or not setting overflow. I usually only get scroll bars with overflow: auto on IE. All of the times, it was when where I put the setting in a place I didn't need it. After taking it off, I realize I didn't quite need the overflow setting after all.