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

css, css-float, html-table

Solution

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.

Problem

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/

Original source