我通常是一个网络技术爱好者，支持不使用表格进行设计，但现在它有点让我恼火。 :/
我正在尝试实现一个在使用表格时非常容易的东西，但使用浮动元素似乎过于复杂/不可能。请看以下内容：
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
+-----------------+
在这个设计中，#info 有固定的宽度，并且必须浮动到 #contents 的右侧。 #contents 应该占据剩余的宽度。
在简单的设计中，#contents 和 #info 都存在时，这并不太复杂。它们都是固定宽度的，具有 float:left 属性，并且非常适合。
然而，在某些页面上，#info 不会出现。当这种情况发生时，显然，#contents 就不能扩展到适合整个页面。
最明显的解决方案是不给 #contents 固定宽度，使其缩放，并将 #info 改为 float:right。除了需要进行一些小的其他更改外，它并没有完全符合期望的行为，因为当 #contents 比 #info 更高时，它会打破列式布局：
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
| +---------+
| |
+---------------------------+
更糟糕的是，在
#contents内部，还有其他设置了border-bottom属性的<div>，边框也穿过#info，如下所示：+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------|-|-------|
| | +-------+
| +---------+
| |
+---------------------------+
因此，考虑到所有这些因素，我该如何给
#info设置固定宽度，使其浮动到#contents右侧，但保持列式设计，并在#info不存在时使#contents占据整个屏幕，同时确保没有视觉伪影，并且不使用超过一个样式表？以下是当#contents和#info同时存在于页面上时的期望结果：+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------| | |
| | +-------+
|-----------------|
| |
+-----------------+
在仅有#contents的页面上，这是期望的结果：
+---------------------------+
| #contents |
|---------------------------|
| |
|---------------------------|
| |
+---------------------------+
希望这不会太令人困惑。我已经无法思考了。