Display:inline-block on

[enjay]

Having an interesting issue with some

[joshuanhibbert]

I think that you will find the problem is with your markup. A valid list must have list items as its direct children, and currently you have anchor tags as the direct child, with the list items nested inside. Try the following instead:

Home
About
Stuff
Contact

[chrisburton]

@joshuanhibbert Why do you prefer the extra markup version instead of setting the font-size to 0? Is there really a difference?

[wolfcry911]

@enjay, set the anchors to display: block. And personally, I’d float the li instead of display: inline-block;

[chrisburton]

@kgscott284 The only reason I went with the font-size: 0; trick was because WordPress outputs a lot of space in the markup. Now that I think about it, I think Josh’s solution would work but I would agree, it feels much cleaner.

[joshuanhibbert]

@ChristopherBurton @kgscott284 In this case, I simply used the markup that was provided. The fix that I use depends on the design; if I am working with ems then using font-size: 0; means that any child elements will have a font-size of 0 (I often use ems for responsive designs as it makes it much easier to adjust font sizing across the board for different sized screens). Another fix I often use is margin-right: -.25em;.

[joshuanhibbert]

@enjay My personal preference would be to use inline-block over floats, and I wrote up why here: http://joshnh.com/2012/02/why-you-should-use-inline-block-when-positioning-elements/

That doesn’t mean that I am right, but I’m sure you can make an educated decision once you know all the facts!

[wolfcry911]

joshua, with all due respect, your ‘facts’ are somewhat twisted to bolster the use of inline-block. I have nothing against using it, but I also have nothing against floats either (which you seem to have). The right tool for the job… In this simple case of left aligned navigation there is absolutely zero benefit to using inline-block over float. In fact, you need more (albeit little) css to use inline-block than floats.

[joshuanhibbert]

@Wolfcry911 Please let me know of any facts that I have twisted, as this was not my intention. If you are able to list them for me, I will amend them in the article. The piece is obviously biased, but I certainly am not trying to mislead anybody. I was very careful to make sure that I never stated that using floats is wrong.

In my opinion, display-inline is a more powerful tool when aligning elements for layout purposes. That of course, is just my opinion, and as I have already stated above, it does not mean that I am right!

My intention wasn’t to start a flame war, but simply to provide @enjay with a little more information so that they can make their own decision. I offered my opinion (as you did also), and then included some additional material I had written to offer some insight as to why.

[joshuanhibbert]

@enjay No worries at all.

[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.

[joshuanhibbert]

@wolfcry911 I think what it comes down to, as you stated above, is understanding the specifications. Unfortunately, I think that there are many people working in this industry who have never taken the time to read them.

Apologies for the ‘educated decision’ sentence. I meant it in a genuine way—readers that have all the facts can better make up their own minds—but upon rereading, I can see how it can appear suggestive. Also, thanks for taking the time to share the above; this will certainly help people understand the pros and cons of using both floats and inline-block.

[Author]

Posts