CSS (Fixed width right, fluid left, left is first

Question

I have a fluid-width left div and a fixed-width right div. It took a while to figure out how to make this work because I am theming a jrox site and jrox will not let me change the order the columns are generated. The 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>

The 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;
}

As you can see with this fiddle the above looks great. It works almost perfectly. I didn't notice any issue until I came across a page with very little content in the jroxSingleColumn like in this fiddle. I need the jroxSingleColumn to fill the remaining part of the div and I need it to be cross browser compatible. I can change some of the HTML but the left column (jroxSingleColumn) will always be in HTML first.

I am almost positive this is not a duplicate. I have read many many similar problems but none are the same.

Thanks.

----- Notice: -----

The other day I asked this same question but I had the HTML code wrong. I looked all over stackoverflow.com to find the correct way to go about fixing my mistake and I found nothing on what to do in this situation. I believe I have done the right thing by accepting the correct answer to my incorrectly asked question and re-asking the question with the correct wording. The incorrect question is here. That fix will not work with the HTML in the correct order.

Answer 1

Use display:table for the parent container and display:table-cell for the two columns within. The one first in the DOM will be to the left and the next will be to the right. Set fixed width for whichever you want to , and auto width for the other and it will fill up remaining space.

Here's a fiddle - http://jsfiddle.net/ZVP6A/26/

Answer 2

The way to do it is remove float: left; from the left column. Put this column markup below the right column, Assign overflow hidden, and it will work perfectly.

DEMO http://jsfiddle.net/kevinPHPkevin/ZVP6A/27/

.jroxSingleColumn{
  margin-right: 160px;
  padding:0 10px;
  background-color:#B6B6B4;
  overflow:hidden;
}

Answer 3

Here's a variation using a mix of relative and absolute positioning. Though I like the display table and table-cell option.

Remove the floats, apply position: relative; to #jroxContent and position: absolute; to .jroxRightColumn. After that simply move .jroxRightColumn to the top right with top: 0; right: 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;
}