CSS Columns: Fixed width and "remainder"?

Question

Let's say I want to have two columns. The right one is 200px wide, and the left one just takes up the remaining width. Is this possible? What do I set the width of the left column to be?

Answer 1

Update: Solved Using Flexbox

Now that we have Flexbox (with over 95% support globally) this layout (and others) can be easily achieved without styles being dependent on source order.

Flexbox Example:

HTML

<div class="flex-container">    <div class="flex-column"> Big </div>    <div class="fixed-column"> Small </div> </div> 

CSS

.flex-container {    display: flex; } .flex-column {    flex: 1; }  .fixed-column {   width: 200px; } 

Live Demo using Flexbox

---

---

---

Solved Using Floats

The trick is matching the remainder column’s margin to the floated sidebar’s width. Remember, source order matters when using floats, so we make sure the floated element comes first.

Example right-aligned small column:

HTML

<div id="Container">     <div id="RightColumn">Right column</div>     <div id="LeftColumn">Left column</div> </div> 

CSS

#RightColumn {     float : right;     width : 200px; }  #LeftColumn {     margin-right : 200px; }​ 

Live Demo

• Right-aligned small column
• Left-aligned small column

Answer 2

You float the left column and set margin to minimum of the width of the left column.

<div id="Container">     <div id="LeftColumn" style="float: left; margin-right: 200px;"></div>     <div id="RightColumn" style="float: right; width: 200px;"></div> </div> 

OR

<div id="Container">     <div id="RightColumn" style="float: right; width: 200px;"></div>     <div id="LeftColumn" style="margin-right: 200px;"></div> </div>