CSS: Two 50% fluid columns not respecting min widt

Question

I'm trying to use this layout with two 50% column width instead. But it seems that when the right columns reaches its 'min-width', it goes under the left column. Is there any way to use the 'shim' technique to set a min-width to the wrapper so both columns stop resizing. Thus, eliminating the problem of the right column finding itself under the left column.

My page is as follows.

<style type="text/css">

#left {
    float: left;
    width: 50%;
}

.minwidth {
    width: 500px;
    height: 0;
    line-height: 0;
}

</style>

<div id="wrapper">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
    <div class="minwidth">&nbsp;</div>
</div>

The issue with that is the left column will stop resizing, but the right column will go below the left column and keep resizing. Basically, the effect that I want is once the wrappers width goes bellow, that both left, and right columns also stop resizing. Putting the shim in both left and right columns did not work either.

Is there possibly another way of going abouts getting two 50% width columns and using a shim to properly set a min width?

Thank you.

Edit: The whitespace in the minwidth class is actually &nbsp but it got converted. ;)

Answer 1

Try this for the style:

.left, .right { width:50%; float: left; }
.right { float: right; }
.minwidth { min-width: 500px; display: block; height: 0; clear: both; }

Answer 2

Use a 2 column table. It will do exactly what you want. Div's are supposed to be used to simply divide up logically distinct blocks, and tables are there to lay out columned data. If you want two columns, use a table, rather than trying to force Div's to behave like a table.