Two column design; one fixed and one variable width column

I'll show you a CSS technique that allows you to have a two column design with one fixed width column (such as for a side-menu) and the other column fill the remainder of the content area.  You can easily do this without a table or without Javascript.  Using a pure CSS fix is is straight forward with a little margin trickery.

Here is the HTML:

<div class="right-wrapper">  
    <div class="right">
        I take up the remaining space
        <div style="width: 100%; background-color: #a0a0a0;">
            I'm an element that takes 100% of my current area.
        </div>
    </div>
</div>  
<div class="left">  
    I take up 200 px wide. No more, no less.
</div>  

Here is the CSS:

.right {
     margin-left: 200px;
}
.right-wrapper {
    float: left;
    width: 100%;
}
.left {
    float: left;
    width: 200px;
    margin-left: -100%;
}

Ok, so what's going on here? Lets start with the right element.

The "right" element get pushed right by 200px due its margin-left property. If we attempted to apply a width of 100% to it, the actual width would be 100% + 200px and would overflow the containing area. This is why the wrapper is needed. The wrapper specifies a width of 100% and takes up the containing area. The "right" div sits inside the wrapper and uses the margin-left property to position itself 200px to the right leaving a gap for the left column.

You can see in the HTML that the "left" element is actually after the "right" element. The goal is to get the "left" element to fit in the gap on the left side. Using the magic of negative margins the "left" element gets shoved back over top of the "right" element by setting margin-left: -100%.

To see an online demo, check out JSFiddle.  This has been tested in IE9, Chrome, and FF 20. YMMV for older browsers.

comments powered by Disqus