divs stacking vertically in IE9

Question

I'm having an issue where my divs stack vertically instead of 3 per row in IE9. They behave properly in all other browsers, and even show ok in developer tools IE9, but in a real IE9 browser and also on browser stack all the divs are stacked into a single column instead of three. Thanks in advance for your help!

Live URL is: http://www.homewetbar.com/glasses-drinkware-whiskey-glasses-c-211_207.html Screenshot of issue in IE 9: http://www.homewetbar.com/images/bs_win7_IE_9.0.jpg

Answer 1

Run your site through W3 validator . Might have something to do with some of the errors showing up.

Answer 2

Found it, had a hunch right after posting that worked

IE9 and below did not know how to interpret this code for multiple columns I found online:

[class*='col-'] {
    float: left; 
    min-height: 1px; 
    width: 31%; 
    /*-- our gutter -- */
    padding: 10px; 
}

I had to change it to:

.col-1 {
    float: left; 
    min-height: 1px; 
    width: 31%; 
    /*-- our gutter -- */
    padding: 10px; 
}