Alternative to Inline-Block and Its Support with Current Browsers

Alternative to inline-block and its support with current browsers

You can actually make the inline-block cross browser, you must have missed this great article.

Equivalent of div display inline-block for IE8, IE7 and older browsers

Here is a good resource that covers this topic: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Basically IE has a trigger called "hasLayout". Triggering this will allow you to use display:inline-block on a block level element (by default IE only allows inline-block on native inline elements).

Additionally older version of Fire Fox didn't support inline-block either, but had an "inline-stack" value (moz-inline-stack).

Here is, to my knowledge, the best way to get a cross-browser display:inline-block:

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

In IE6 ,What are the alternatives to display: inline-block, table, table-row. table-cell?

While writing valid, semantic markup for layout on ie6 is a painful task, it is not impossible, here are some sources.

• How to make it work on ie6:a guide to the problems you'll face on ie6 and how to fix them.
• Quirksmode: Great guide about browser support for every css declaration.
• Cross-Browser inline-block. a rather long but very thorough
  article on cross-browser inline-block implementation.

I hope you find them helpful.

Simplest vertical alignment we can think of

If I need IE7 support, I tend to go for the "display: inline-block with an extra element" method. This does work in IE7 with a small change, here's an example.

If I don't need IE7 support, I usually use the display: table-cell method.

Sometimes, I can't use the display: table-cell method, typically when I need to use absolutely position something at the bottom of the element with display: table-cell. position: relative doesn't work on table cells, at least in Firefox. In those cases, I use the display: inline-block method, except that the "extra element" is inserted via :before, which keeps the HTML clean.

Are float based layouts still needed with modern browsers?

Should you move away from floats entirely?

Sure, so long as you don't need the deeper browser support. When it comes down to it, what really matters is whether the page displays properly for the largest numbers of visitors to your site as possible, right?

Another issue that should be of concern to you is maintainability, but I can't say that it'd be accurate to say that either method is less maintainable than the other in every situation. So I'd just ask yourself what layout method your team is more familiar with and how far back you need to support.

display: table-cell is supported in IE8+. Float displays can go all the way back to IE6.

Other thoughts & the future...

Contrary to what you said about floats, I think when used right they can be very predictable. My primary qualm with them is the need to clear the parent which is a bit awkward. Further, popular scaffolding systems like Bootstrap and 960-Grid still choose to use floats, and for good reason: they're useful, have great cross-browser support, and can do what you need to do.

With that said, the future is looking good for Css and layouts. There are two upcoming models of layout in Css: the grid system and the flexbox model. Neither are recommendations yet, so browser support is a bit shaky on them.

The grid system is similar to display: table-cell but gives you much greater control. Flexbox tries to generalize and abstract the idea of displaying elements, which allows for really powerful, fluid (or 'flexible') layouts. Both of these will be pretty amazing once they're implemented in browsers.

If you want to read more on usage of flexbox, I recommend the excellent MDN article about it

Were I you, I'd just hold out and use floats – in particular, by using a scaffolding framework. I haven't worried about writing scaffolding Css in a long, long time; I use frameworks since the code is already written for me. And, for me, I'd only find it worthwhile to completely restructure a project once flexbox and the grid system are a recommendation and more widely implemented.

Horizontal scrolling with inline-block working in Firefox but not in Chrome

Solved it after some experimenting. I had to add another div in between and set its width to the total width of the contained elements (considering borders and paddings). This way the display property is no longer needed and everything works in both Firefox and Chrome.

<div class="news-list-container">
  <div id=container>
    <div class="news-list-item">A</div>
    <div class="news-list-item">B</div>
    <div class="news-list-item">C</div>
    <div class="news-list-item">D</div>
    <div class="news-list-item">E</div>
    <div class="news-list-item">F</div>
  </div>
</div>

.news-list-container {
    overflow-x: auto;
    overflow-y: hidden;
}

#container {
    height: 187px;
    width: 1176px;
}

.news-list-item {
    border: 1px solid #E5E5E5;
    float: left;
    height: 175px;
    padding: 5px;
    width: 184px;
}

Browser support for margin: auto

Although you probably don't want to adjust your code to work in antique browsers that don't support margin: 0 auto;, but since you asked:

Support started only with IE6. If you want to support earlier browsers, you can add text-align: center; to the parent element. This works because old browsers incorrectly apply text-align also to block-elements. At the same time, keep margin: 0 auto; for modern browsers. If you want text-align: center to work in modern browser as well, you can also set display: inline-block; - then you won't need margin: 0 auto;.

So assuming this is your HTML:

<div id="outer">
    <div id="inner"></div>
</div>

you have these options:

Option 1

#outer {
    background: pink;
    width: 100%;
    text-align: center; /* for very old browsers */
}

#inner {
    background: green;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 auto; /* for >99% of browsers */
}

Option 2

#outer {
    background: pink;
    width: 100%;
    text-align: center;
    height: 50px; /* height of child - necessary for IE8 and IE9,
    otherwise the height is slightly larger than that of the child */
}

#inner {
    background: green;
    display: inline-block; /* necessary for modern browsers, IE8+ */
    width: 50px;
    height: 50px;
}

But as I said, before supporting such ancient browsers, you may really think if the extra effort is worth it, or if it's better to just drop support for them.

---

Related Topics