Normally, when we want to have multiple DIVs
in a row we would use float: left
, but now I discovered the trick of display:inline-block
Example link here.
It seems to me that display:inline-block
is a better way to align
DIVs
in a row, but are there any drawbacks? Why is this approach less popular then the float
trick?
In 3 words: inline-block
is better.
Inline Block
The only drawback to the display: inline-block
approach is that in IE7 and below an element can only be displayed inline-block
if it was already inline
by default. What this means is that instead of using a <div>
element you have to use a <span>
element. It's not really a huge drawback at all because semantically a <div>
is for dividing the page while a <span>
is just for covering a span of a page, so there's not a huge semantic difference. A huge benefit of display:inline-block
is that when other developers are maintaining your code at a later point, it is much more obvious what display:inline-block
and text-align:right
is trying to accomplish than a float:left
or float:right
statement. My favorite benefit of the inline-block
approach is that it's easy to use vertical-align: middle
, line-height
and text-align: center
to perfectly center the elements, in a way that is intuitive. I found a great blog post on how to implement cross-browser inline-block, on the Mozilla blog. Here is the browser compatibility.
Float
The reason that using the float
method is not suited for layout of your page is because the float
CSS property was originally intended only to have text wrap around an image (magazine style) and is, by design, not best suited for general page layout purposes. When changing floated elements later, sometimes you will have positioning issues because they are not in the page flow. Another disadvantage is that it generally requires a clearfix otherwise it may break aspects of the page. The clearfix requires adding an element after the floated elements to stop their parent from collapsing around them which crosses the semantic line between separating style from content and is thus an anti-pattern in web development.
Any white space problems mentioned in the link above could easily be fixed with the white-space
CSS property.
SitePoint is a very credible source for web design advice and they seem to have the same opinion that I do:
If you’re new to CSS layouts, you’d be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You’ll be dazzled by the ingenuity, astounded by the complexity, and you’ll gain a sense of achievement when you finally understand how floats work.
Don’t be fooled. You’re being brainwashed.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
2015 Update - Flexbox is a good alternative for modern browsers:
.container {
display: flex; /* or inline-flex */
}
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Dec 21, 2016 Update
Bootstrap 4 is removing support for IE9, and thus is getting rid of floats from rows and going full Flexbox.