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

If I had two tables?

<table> and... <table> 

And the CSS looks like:

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

It is not working...

5 Answers

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; }​ 

You can simply define float: left to your table class it will come automatically next to each other:

table { float:left; background:yellow; margin-left:10px; }

<table> <tr> <td>Table 1</td> </tr> <tr> <td>blah blah</td> <td>blah blah</td> <td>blah blah</td> </tr> </table> <table> <tr> <td>Table 2</td> </tr> <tr> <td>blah blah</td> <td>blah blah</td> <td>blah blah</td> </tr> </table>

Try giving them a width as well. 40% each should be a good test.

Hey it working i give you live demo now check this

and now you can do thing two option as like this

Option one

table.one { position:relative; float:left; border:solid 1px green; } table.two { position:relative; float:right; border:solid 1px red; }

<table> <tr> <td>hello demo here</td> </tr> </table> <table> <tr> <td>hello demo here 2</td> </tr> </table>

Option two

<table align="left" border="1"> <tr> <td>hello demo here</td> </tr> </table> <table align="right" border="1"> <tr> <td>hello demo here 2</td> </tr> </table>

What do you mean it's not working?

The CSS that you have will put one table on each side of the parent element. If you're looking for them to be float directly against each other rather than on opposite sides of the parent you'll want 'float: left;' in both of them (or conversely 'float: right;' in both of them).