Problem in displaying html tables horizantally

Actually i want to display 开发者_开发百科these 2 tables horizontally on my GUI.But not able to display them properly.Can u please look into my code? and how can i display these two tables horizontally? This is my code link : http://jsfiddle.net/Yr7km/

I would be doing some thing like this

<div id="container">
<div id="table1">put your table here</div>
<div id="table1">put your table here</div>
<div class="clear">&nbsp;</div>
</div>

In CSS
#container{ width: 100%;}
#table1{ width: 50%; float: left; display: block;}
#table2{ width: 50%; float: right; display: block;}
.clear{ clear: both;}
This is minimum markup and CSS that should give you an idea how to layout elements.

There isn't any cross browser and correct solution. I would go with ancient style code and put them in a third table.

The fast fiddle:
http://jsfiddle.net/Yr7km/15/

I've added some CSS to make it more visible. I've added HTML comments with a lot of * to mark my edits too.

Thre is display: table-something in CSS. Unfortunately IE has problems with this. w3schools link You may play with floats, however it may be problematic sometimes.