使用CSS的Div布局问题

我试图在我的页面上并排布置两个Html表。当我点击左侧的投资组合ID时，我的交易贡献记录显示在右侧

我使用单独的div，它允许我创建一个锁定列标题的标题表，并在下面创建另一个包含数据的可滚动表

请参阅样本：

详细信息：

页面的一个主分区- 页面中有四个div：

1）两个向左浮动的div
1a）第一个div是一个仅包含

和

标题的表
2a）第二个div可滚动，包含完整的表格单元格内容，没有标题

2）两个向右浮动的div
1a）同上
2a）同上

正如您将看到的，我的公文包定义div和左侧的表看起来既漂亮又整洁

然而，贸易合同部门和右边的表格略有倾斜

仅供参考-如果没有为表col头使用单独div的技术，我的两个表并排看起来很棒。但是，它们没有锁定标题列的外观。ex/

---

我将继续试验，但一些指导和建议将不胜感激。

将您的div组合包装在包装div中，并将其浮动

<div id=left>
    <div id=leftheaders />
    <div id=leftbody />
</div>

你的小提琴有太多的数据，我的浏览器不喜欢，所以这里有一个简单的演示。我可能会这样做：注意，

display:inline block

至少不受IE7和更低版本的支持，可能也不受IE8的支持（不记得了）。我还想研究一下推特引导，让你的生活更轻松一点（也更好看）。注意，只有IE7和更低版本不支持

display:inline block

。如果您不需要支持这些浏览器版本，那么使用

display:inline block

，而不是

float

。总有一天，所有相关的浏览器（即，我在看您）将支持

display:inline block

和

float

将恢复为用于内联目的。@FrankieTheKneeMan-感谢您的想法。它的工作原理是，我的两个div现在很好地并排排列。现在我的标题在右侧出现了一个奇怪的问题…日期列偏离了右侧-表{width:660px；border collapse:collapse；}您的表设置的标题太宽了。再次是thx Frankie；事实上，这是一个桌子宽度的问题。现在，我想确定我的位置，使其始终在我的列下方对齐；似乎根据我提取的xml数据、单元格内容的大小和动态宽度，它会扭曲元素的宽度。