I'm creating a layout for my website, and it can be found in its current state here:

www dot ideaessence dot com

I know there are other problems with the page, but the one I have no clue how to fix is the column set-up. The left column is a fixed width and clinging left just like I want it to. The right column is scalable (liquid?), which I want. The problem is that when the browser window size shrinks (horizontally) the right column goes beneath the left column. I set a minimum width but that didn't help.

The ideal layout would be one that scales just like this but where the right column doesn't move underneath the left column.

I'm creating a layout for my website, and it can be found in its current state here:

www dot ideaessence dot com

I know there are other problems with the page, but the one I have no clue how to fix is the column set-up. The left column is a fixed width and clinging left just like I want it to. The right column is scalable (liquid?), which I want. The problem is that when the browser window size shrinks (horizontally) the right column goes beneath the left column. I set a minimum width but that didn't help.

The ideal layout would be one that scales just like this but where the right column doesn't move underneath the left column.

Isn't the behaviour the result of your specifying a minimum width.

When the browser window shrinks horizontally, it eventually gets too narrow to fit a 500-pixel-wide column2 alongside column1; and as column2 is specified as "float", it floats below column 1.

Yes. You're right. That fact led me to a solution (at least in FF so far). I just added the fixed width of the left column to the minimum width of the right column. That number became the width of a new DIV that I put the 2 columns in.

Thanks.