How can I float two tables next to each other left to right?

Question

If I had two tables?

<table class="one"> and... <table class="two">

And the CSS looks like:

table.one {
    position: relative;
    float: left;
}
table.two {
    position: relative;
    float: right;
}

It is not working...

Answer 1

Don't use position:relative, just provide width for each table in order to float properly.

table.one {
    float:left;
    width:45%;
}

table.two   {
    width:45%;
    float:right;
}​