How to place a div on right side of cascading tables - CSS

Question

I have 3 tables, cascading one after the other. I have a div, that I want to place on right side of these tables. The height of div may vary according to text inside. Currently the div is displayed below tables, like the image below;

<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
  <tr>
    <td class="cell1">Cell1</td>
    <td class="cell2">Cell2</td>
  </tr>
    <tr>
    <td class="cell1">Cell3</td>
    <td class="cell2">Cell4</td>
  </tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
  <tr>
    <td class="cell1">Cell5</td>
    <td class="cell2">Cell6</td>
  </tr>
    <tr>
    <td class="cell1">Cell7</td>
    <td class="cell2">Cell8</td>
  </tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
  <tr>
    <td class="cell1">Cell9</td>
    <td class="cell2">Cell10</td>
  </tr>
    <tr>
    <td class="cell1">Cell11</td>
    <td class="cell2">Cell12</td>
  </tr>
</table>
<div class="mydiv">mydiv</div>

But I want to place the div next to tables, so that it can extend downwards.

Here is the working fiddle http://jsfiddle.net/ZHVuf/1/

Answer 1

You should add a container around you table like this :

Html

<div id="container">
<!-- Your table -->
</div>

And make him float left, like your div #myDiv

Css

#container {
    float:left;
}

see updated fiddle.

On this second updated fiddle, I added a wrapper with a clearfix !

insertusernamehere commented that you could use overflow:hidden instead of the clearfix, see here for a new working way to do this with less code.