HTML怎么创建相等的列,如何在HTML/CSS中创建稳定的两列布局

我想要一个有两列的容器。细节：

容器

>宽度应该调整到其父元素的100％(容易完成)。

>高度必须调整为包含两个列(即，其高度应该恰好等于两列的较大高度，因此没有溢出，滚动条从不显示)

>应具有等于左列宽度的两倍的最小大小。

一般的列

>应该具有可变的高度，调整到其内容的高度。

>应该并排，使得它们的顶部边缘在一条直线上。

>如果甚至单个像素的边框，填充或边距应用到任一个，应该不打破布局或包装在彼此之下，因为这将是非常不稳定和不幸的。

左栏具体

>必须具有固定的绝对宽度(以像素为单位)。

正确的列

>宽度必须填充容器中的剩余空间。换一种说法…

> Width必须等于容器宽度减去左列的宽度，这样，如果我在此列中放置一个DIV块元素，将其宽度设置为100％，给它一个像10px的高度，并给它一个背景颜色，我将看到一个10px高的彩色条，从左列的右边缘到容器的右边缘(即它填充右列的宽度)。

所需稳定性

容器应该能够调整大小(通过调整浏览器窗口大小)到其最小宽度(指定早)或更大的宽度，而不会打破布局。 “打破”将包括左列更改大小(记住它应该有一个固定的像素宽度)，右列包裹在左边一个，滚动条出现，块元素在右列失败占用整个列宽，并且一般来说任何上述规格都不成立。

背景

如果使用浮动元素，则应该没有机会正确的列将包装在左边的列下面，容器将不能包含两个列(通过剪辑列的任何部分或允许列的任何部分溢出其边界)，或滚动条将出现(所以我会厌倦建议使用overflow：hidden以外的任何东西来触发浮动元素遏制)。对列应用边框不应该破坏布局。列的内容，特别是右列的内容，不应该破坏布局。

似乎有一个简单的基于表的解决方案，但在任何情况下，它失败惨败。例如，在Safari中，如果容器变得太小，我的固定宽度的左列将缩小，而不是保持我指定的宽度。也似乎是这样的情况，当应用于TD元素时，CSS宽度指的是最小宽度，使得如果更大的东西放置在其内部，则它将膨胀。我试过使用table-layout：fixed;没有帮助。我还看到了表示右列的TD元素不会扩展以填充剩余区域的情况，或者它将出现(例如，第三列1px宽将被一直推到右侧)，但是在右列周围放置边框将显示它只有其内联内容一样宽，并且其宽度设置为100％的块级元素不填充列的宽度，而是匹配内联内容的宽度(即，TD的宽度似乎完全取决于内容)。

One potential solution我所看到的太复杂了;我不在乎关于IE6，只要它工作在IE8，Firefox 4和Safari 5。