Skip to content

Instantly share code, notes, and snippets.

@fcalderan
Created July 21, 2011 10:07
Show Gist options
  • Save fcalderan/1096902 to your computer and use it in GitHub Desktop.
Save fcalderan/1096902 to your computer and use it in GitHub Desktop.
A helper class for an easy and crossbrowser inline-blocks usage (with H5BP).
<ul class="ibw">
<li>inline block</li>
<li>inline block</li>
<li>inline block</li>
</ul>
<section class="ibw">
<article class="ib">...</article>
<aside class="ib">...</aside>
</section>
/**
* @author: Fabrizio Calderan, Jul 21st, 2011
* Twitter: fcalderan
* this class has to be assigned to the inline-blocks parent wrapper
*/
.ibw {
white-space : nowrap;
letter-spacing : -3px;
word-spacing : -3px;
}
/**
* ib class are the inline-block elements: in case we are using a list (<ol>, <ul>)
* we could avoid assigning .ib class to every <li> element with .ibw > li
*/
.ibw > li, .ib {
display : -moz-inline-box; /* FF2 or lower */
display : inline-block; /* FF3, Opera, Safari */
white-space : normal;
letter-spacing : normal;
word-spacing : normal;
vertical-align : top /* or other available alignment */ ;
}
/**
* these rules ensure crossbrowsing with IE7. Please note that on IE<8 inline-block will work
* only on elements that are not natively block elements (applying this on a <div> won't work)
* Anyway you can safely use on newer HTML5 elements since they're not recognized at all on
* these IE versions (see http://jsfiddle.net/fcalderan/YjXyS/ for a demo).
*/
.ie7 .ib, .ie7 .ibw > li { display : inline; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment