Three Tables Horizontal

Question

I'm creating a page that needs three tables placed horizontally. I tried two first using:

#table_one {
position: relative;
float: left;
}

#table_two {
position:relative;
display: block;
}

And it worked. I wanted to add another table so I tried:

#table_one {
position: relative;
float: left;
}

#table_two {
position:relative;
display: block;

#table_three {
position:relative;
float: right;
}

But that third table appears below the two tables, placed itself on the right, and it expands itself vertically it even got out of my page background.

Answer 1

Instead of float:left/right use inline layout for the block elements (like display:inline-block or display:table-cell)