CSS on IE9: divs inside td elements in a table will display vertically

Question

I have a series of div elements nested inside another div placed in a td cell of a table. For some reason these div, although they're floated to the left and inline-blocks, and while both table, td and container div are set to width: 100%, they appear stacked vertically on IE9.

This is the link to a live site (check for the swatches): http://ssd2go.co.uk

And this is a simplified sample of my code:

<table>
    <tr>
        <td>
           <div class="select">
               <div><input><a><img></a></div>
               <div><input><a><img></a></div>
               <div><input><a><img></a></div>
           </div>
        </td>
    </tr>
    <tr>
        <td>
           <div class="select">
               <div><input><a><img></a></div>
               <div><input><a><img></a></div>
               <div><input><a><img></a></div>
           </div>
        </td>
    </tr>
</table>

table, tr, td and div.select are width: 100%; all the inner layers and links have float:left and display:inline

Answer 1

The Fix: Removing the following property fixes it in IE 8-10, FF, Chrome:

.variations-table,
.variations-table tr,
.variations-table tr td,
.variations-table tr td>div {
    width: 100% !important;
}

Best Practices: Ideally you would also want to avoid making your markup so complex for a simple layout like this. Where you could start: try to avoid using tables, shorten your classnames and minimize or eliminate the use of ids. You could get away with something like:

<form>
  <div class="select">
    <a class="select-option">120 GB</a>
    <a class="select-option active">240 GB</a>
    <a class="select-option">480 GB</a>
  </div>
  <div class="select">
    <a class="select-option black">Black</a>
    <a class="select-option gray">Gray</a>
    <a class="select-option purple active">Purple</a>
    ...
  </div>
</form>