Comments on: Float vs. Inline-Block

By: Anonymous

Anonymous — Fri, 03 Feb 2012 14:34:00 +0000

Once IE 6 and 7 become obsolete inline-blocks should become more prevalent than floats.

By: Thomas Kettner

Thomas Kettner — Tue, 24 Jan 2012 09:27:00 +0000

Great Article! Not only from a technical perspective but also easy to read and perfectly stressed.
Thanks for that.

By: Myke

Myke — Thu, 29 Dec 2011 21:43:00 +0000

probably one of the most informative posts i’ve ever read about floats and display-inline. Thank you SOOOO much for this article.

By: Richard Walton

Richard Walton — Thu, 24 Nov 2011 19:10:00 +0000

Great article. Answered all of my questions.
I think I’ll be sticking with floats, for the most part.

By: Dinesh Ramakrishnan

Dinesh Ramakrishnan — Wed, 12 Oct 2011 12:25:00 +0000

Great article… this addresses many confusions between float and in-line block usages.

By: Larseirik

Larseirik — Wed, 06 Jul 2011 09:24:00 +0000

Great article. Makes it easier for me as a developer to understand the whoe css layout issues.

By: Robert Cambridge

Robert Cambridge — Thu, 21 Apr 2011 09:30:00 +0000

overflow:hidden has it’s consequences (any non-floated child elements outside of the parent’s visible area will not expand the box).

The default is overflow: visible.

Use overflow: auto

By: admin

admin — Wed, 20 Oct 2010 00:42:17 +0000

Jacob,

Wow. Great work. Thanks for this post and for doing the research.

I like the zoom technique and the IE 6 hack saves an HTTP request by eliminating the conditional stylesheet as long as it isn’t needed otherwise. (I use the conditional stylesheets as a matter of preference. I try to only use CSS hacks at this point in my back-end design where functionality matters more than aesthetics and compliance.)

I have to say, I’m not a huge fan of the negative word-space and letter-spacing. Granted, it’s a similar amount of CSS commands but what if a browser’s default letter and word spacing differs from the one you choose to offset. Setting the font-size to zero, I think is fool proof and cross-browser compatible.

By: Dave Wright

Dave Wright — Tue, 19 Oct 2010 08:51:53 +0000

I have always used a clear fix div class, I wasn’t aware of the overflow:hidden technique however, this seems much cleaner, you’ve converted me!

By: Jacob

Jacob — Thu, 14 Oct 2010 14:13:21 +0000

Thank you very much for this post. I think all in all (like most layout techniques) they both shine in their own regard and for their own specific situations (as you pointed out).

But, that being said I think that the inline-block method should be at least written about more. Perhaps I have just been thick but I don’t think I’ve seen it used much at all, and maybe it’s because of the white-space issue, but I also think its infrequency is also due to obscurity.

All that aside though – I wanted to point out how yahoo seems to be handling the whitespace issue (this is the method they are using for their grid v3).

for the elements that are being rendered inline-block they have set the following properties:

display:inline-block;
zoom:1;
*display:inline;
letter-spacing:normal;
word-spacing:normal;
vertical-align:top;

things to note in this:
1. the *hack is being used to slice out the ie rendering like you did in the conditional stylesheet. (either or, do what you like)
2. zoom:1 fixes some display issue I think with the way ie7 handles the display:inline (regardless, the display:inline + zoom:1 make this thing work in ie7)
3. the word-spacing and letter-spacing are to reverse the next thing they are doing which directly addresses your white-space concern.

The following styles are applied to the parent of the inline elements in question (in your example, the ul):

letter-spacing:-0.31em;
*letter-spacing:normal;
word-spacing:-0.43em;

I haven’t fully fleshed out this whole thing but it seems to handle the white-space issue you described. Anyway, I think at the least it’s worth further investigation. Thanks again for the post.