Question

There is a way to do it using absolute positioning.

I have a two-column layout. The left column is a fixed 200px width plus 30px left margin. The right column contains the content and should expand to fit the available space.

I have done it by positioning each column using absolute positions and stretching the right column using right: 0px to that it will touch the right edge. Is there a way to achieve the same effect when using float:left to define the columns? So far the column is only expanding to fit the width of its contents.

Bonus points if I can do this using Compass/Sass (but I don’t want to rely on frameworks like Blueprint, since the layout is pretty trivial).

Answer 1

@Art; you have to write like this:

HTML:

<div class="left">left fix width</div>
<div class="right">right no fix width</div>

CSS:

.left{float:left;width:200px;margin-right:30px}
.right{overflow:hidden}

check the fiddle http://jsfiddle.net/sandeep/4RN2j/