IE8 only displays 1 of my floated divs

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">
        <a href="http://localhost/multi/portfolio-pieces/test-digitial-item-3/" class="checked" title="Test Digitial Item 3" rel="bookmark"><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="" /></a>                              
        <a href="http://localhost/multi/portfolio-pieces/test-digitial-item-2/" class="normal" title="Test Digitial Item 2" rel="bookmark"><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="" /></a>                             
                                                                    </span><!--.col-->
<span class="scrollblock col">
    <a href="http://localhost/multi/portfolio-pieces/blue-mountain-state/" class="normal" title="Blue Mountain State" rel="bookmark"><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开发者_开发技巧="" /></a>                               
    <a href="http://localhost/multi/portfolio-pieces/battle-la/" class="checked" title="Battle LA" rel="bookmark"><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="" /></a>                                
    </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?

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;