IE8 only displays 1 of my floated divs - css-float

Question

I was using inline-block to display a bunch of columns next to one another, but Safari was adding a white space between them no matter what. (though not Chrome even though they are both webkit). so i switched to floating the items and wrapping them in an inline-float element.
in my fiddle this seems to work in IE7-8, chrome, FF and safari.
the markup looks like:
<div id="wrapper" >
<div id="center">
<span> Foo </span>
<span> Bar </span>
</div>
</div>
and CSS:
#wrapper{
background: pink;
text-align: center;
font-size: 0; }
#center {
background: yellow;
display:inline-block;
*display: inline;
zoom: 1; }
span {
float: left;
width:100px;
background:blue;
font-size:30px;
line-height: 1;
color:white;
text-align:center; }
http://jsfiddle.net/KKzuz/10/
but on my live site IE8 rains on my parade and only displays 1 column. ie7 of all things, manages to not muck it up.
http://donutsites.com/sandbox01/portfolio/print/logos/
the CSS selectors are different, but the markup is pretty similar... as far as i can tell anyway. though the fiddle is more simplified b/c i'm not trying to run the smoothdivscroll plugin there.
<div class="scrollWrapper">
<div class="clearfix scrollableArea">
<span class="scrollblock col">
<img width="175" height="345" src="http://localhost/multi/wp-content/uploads/arb_2010_formula_back-175x345.jpg" class="fluid attachment-digital-thumb wp-post-image" alt="arbor snowboard" title="" />
<img width="345" height="345" src="http://localhost/multi/wp-content/uploads/JGWI_03-345x345.jpg" class="fluid attachment-digital-thumb wp-post-image" alt="JGWI_03" title="" />
</span><!--.col-->
<span class="scrollblock col">
<img width="345" height="345" src="http://localhost/multi/wp-content/uploads/BMS-POSTERS-13.5x20_1-345x345.jpg" class="fluid attachment-digital-thumb wp-post-image" alt="BMS POSTERS 13.5x20_1" title="" />
<img width="345" height="345" src="http://localhost/multi/wp-content/uploads/BATTLE_LA_Wall_1-345x345.jpg" class="fluid attachment-digital-thumb wp-post-image" alt="BATTLE_LA_Wall_1" title="" />
</span><!--.col-->
</div><!--.scrollableArea-->
</div><!--.scrollWrapper-->
and the CSS:
div.scrollWrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
text-align: center;
font-size: 0;
clear: both;
}
div.scrollableArea {
position: relative;
width: auto;
height: 100%;
overflow-y:hidden;
overflow-x: auto;
display: inline-block;
zoom: 1;
*display: inline;
}
.js div.scrollableArea {
overflow: hidden;
}
.makeMeScrollable {
width:100%;
position: relative;
height: 690px;
}
.makeMeScrollable .scrollableArea .scrollblock {
float: left;
vertical-align: top;
position: relative;
max-height: 100%;
}
.scrollableArea img {
height: 100%;
max-height: 100%;
width: auto!important;
max-width: none;
display: block;
}
/* digital taxonomy */
.col {
max-width: 345px;
max-height: 690px;
width: auto;
}
.col a {
display: block;
max-height: 345px;
height: 50%;
width: auto;
}
can anyone see what i'm missing?

Answer 1

It's the display:inline-block on div.scrollableArea. IE8 is not calculating the width correctly - it thinks it should be only one column wide.
If you are using the inline-block just to center the div, there are better cross-browser ways to do that. One way would be to give div.scrollableArea a width and use margin:0 auto;