CSS(右边固定宽度，左边流动，左边是html中的第一个)如何防止左边的div折叠？

Question

我有一个可变宽度的左侧 div 和一个固定宽度的右侧 div。花了一段时间才弄清楚如何进行这项工作，因为我正在为 jrox 站点设置主题，而 jrox 不会让我更改列的生成顺序。 HTML:

<div id="jroxHeader" class="jroxHeader"> </div>
<div id="jroxContent">
  <div id="jroxMainContent" class="jroxSingleColumn">  
    Very little content.
  </div>
  <div id="jroxRightColumn" class="jroxRightColumn"> Places to go:
    <ul>
      <li>First Menu</li>
      <li>Second Menu</li>
      <li>Third Menu</li>
    </ul>
  </div>
</div>

CSS:

.jroxSingleColumn{
  float: left;
  margin-right: 160px;
  padding:0 10px;
  background-color:#B6B6B4;
}
.jroxRightColumn{
  float: right;
  width: 160px; 
  margin-left: -160px; 
  background-color:#8E8E8C;
}
.jroxHeader{
   width: 100%;
   background-color:#7A7A78;
   height:150px;
}

正如您在 this 中看到的那样摆弄上面看起来很棒。它几乎完美地工作。我没有注意到任何问题，直到我遇到 jroxSingleColumn 中内容很少的页面，如 this fiddle 。我需要 jroxSingleColumn 来填充 div 的剩余部分，我需要它是跨浏览器兼容的。我可以更改一些 HTML，但左列 (jroxSingleColumn) 将始终在 HTML 中。

我几乎可以肯定这不是重复的。我读过很多类似的问题，但没有一个是相同的。

谢谢。

----- 注意:-----

前几天我问了同样的问题，但我的 HTML 代码有误。我查看了整个 stackoverflow.com 以找到解决我的错误的正确方法，但在这种情况下我什么也没找到。我相信我做了正确的事情，接受了我错误提问的正确答案，并用正确的措辞重新提问。错误的问题是here .该修复程序无法以正确的顺序处理 HTML。

Answer 1

下面是混合使用relative 和absolute 定位的变体。虽然我喜欢显示表格和表格单元格选项。

移除 float ，将 position: relative; 应用到 #jroxContent 并将 position: absolute; 应用到 .jroxRightColumn。之后只需将 .jroxRightColumn 移动到右上角 top: 0;右:0；。

http://jsfiddle.net/ZVP6A/28/

CSS

#jroxContent{
     width: 100%;
     position: relative;
}
.jroxSingleColumn{
     margin-right: 160px;
     padding:0 10px;
     width:auto;
     background-color:#B6B6B4;
}
.jroxRightColumn{
     position: absolute;
     top: 0;
     right: 0;
     width: 160px;  
     background-color:#8E8E8C;
}
.jroxHeader{
     width: 100%;
     background-color:#7A7A78;
     height:150px;
}