html中左右浮动怎么写,html-div左右浮动

我正在尝试实现这种布局

_______________________

| |

| Table 1 |

|_______________________|

_______________________

| |

| Table 2 |

|_______________________| ___________________

| |

| bottom bar |

|___________________|

底部栏必须始终位于页面底部表格的右侧.

到目前为止,这就是我所拥有的.

我有这个HTML

table 1

table 2

bottom bar

而这对于CSS

.container{ height: 1000px}

.tables{float: left}

.box{border: 1px solid #ddd; height:150px; width: 100px;}

.bottombar{float: left; position: fixed; bottom: 10px;}

问题是,底部栏与表格重叠,但必须保留在表格的右侧.如果我卸下固定的位置,则底部的条将保持在桌子的右侧,但不再固定在底部.有人可以指导我解决此问题吗？谢谢.