Re: Display:inline-block on

[wolfcry911]

No flame war here – just an intellectual discussion ;)
Numerous times I’ve wanted to politely debate your article and always declined – not sure why I chose this time… my apologies to enjay for the thread hijack.

I also apologize to you joshua, for ‘twisted’ may have been the wrong term to use. I didn’t mean to say you deliberately turned facts on their side. As you stated, I found the article biased. And you’re right – you never said using floats was wrong. I think what prompted me to respond was your last sentence regarding an educated decision once you know all the facts.

To be clear, I also have nothing against one layout method over the other – and like you, I’m just hanging out in css forums helping newcomers. But my take (and I think you’ll agree) is that developers should know and understand the methods they’re using. We should read and perhaps even study the specs, understand the nuances of different properties, know how browsers’ rendering engines work, etc. and not limit ourselves to one method, but explore different ways of accomplishing the same thing and then intelligently choose one over the other.

Now in regards to the article, the ‘issues’ to me aren’t issues – they’re in the specs, they’re features, they’re benefits. Floats are taken out of the document flow – why is this an issue? It’s just a fact. You state that non-floating elements don’t recognize floating children. True – but only partially. Change the overflow value to anything other than the default visible and that non-floating element recognizes the floating children. Or have a child clear the floating siblings and the non-floating parent recognizes them (even through the use of pseudo-elements (obviously referring to the clearfix method by Tony Aslett)). Or set the parent to display: table or table-cell and that non-floating parent will enclose its floating children. And then there’s the question – why not just float the parent and contain the floating children? Obviously there are many layouts where this wouldn’t work – but it could. Or, why not just set a height on the parent that contains the children (like in enjay’s case – he’s already set the height, in fact I think he has too many heights set). Or finally, perhaps letting the floating children ‘hang’ outside their parent as the spec states is a desired outcome.

Floats by default are left or right only, but centering floats is not impossible. I will agree that the use of inline-blocks for centering is probably the better choice, but not the only choice.

The non-collapsing margins again, to me, is not an issue – its in the specs. The floats margins affect all inline elements; while because the floats are out of flow, the in-flow elements margins will only collapse with the previous in flow element. Again, a feature.

Aligning floats to the right without reversing markup order is simple, as simple as using display: inline-block and text-align: right on the parent – just float the items left and float the parent right.

Dealing with the ‘issues’ of inline-block is no less trouble than those of floats. You need to either address the markup (which I disagree with) or make additional property value changes in the css. You do need to address the problem of IE 6 and 7 not understanding the value which is even more ‘work’.

I honestly believe we share the same opinion in that no one method is best, but I wanted to have this discussion so that others wouldn’t be swayed to use only inline-block where a simple float may work better.