How Do I Get My Two Tables To Align Beside Each Other?

I can't get my two tables to align next to each other. The second blue box (of smaller boxes) keeps sitting below the first box. I've tried using 'display: inline-block' and 'float

Solution 1:

Like this?

.wrapper {
  background-color: red;
}

#zero-table,
#table-12,
#table-34 {
  float: left;
}

#zero-data {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  text-align: center;
}

.data-1234 {
  border: 1px solid blue;
  width: 95px;
  height: 95px;
  text-align: center;
}

<div class="wrapper">
  <table id="zero-table">
    <tr id="zero-row">
      <td id="zero-data">0</td>
    </tr>
  </table>

  <table id="table-12">
    <tr id="row-1">
      <td class="data-1234">1</td>
    </tr>
    <tr id="row-2">
      <td class="data-1234">2</td>
    </tr>
  </table>


  <table id="table-34">
    <tr id="row-3">
      <td class="data-1234">3</td>
    </tr>
    <tr id="row-4">
      <td class="data-1234">4</td>
    </tr>
  </table>
</div>

Solution 2:

Give ghost columns a try. Place it between each of the tables.

<!-- your table -->
<!--[if (gte mso 9)|(IE)]> 
</td> 
<td width="150" align="left" valign="top"> 
<![endif]-->
<!-- your table -->

Once you place it in the tables should start aligning properly. Change the width of the TD to whatever it's supposed to be in your code. Let me know you go.

Solution 3:

No need to add Float to every element. Since you want the second and third tables to appear beside the first table, you just add Float to that first table:

#zero-table { float: left; }

See JSFiddle