CSS overflow: hidden limits width of div

So Ive run into this problem where overflow: hidden on a div in a container will limit the divs width when its supposed to be fluid. So basically I have a structure similar to this:

<div id="container">
    <div id="leftColumn">
        //content
    </div>
    <div id="rightColumn">
        //content
    </div>
&开发者_开发问答lt;/div>

In this situation, the leftColumn div is of fixed width and the rightColumn is supposed to be fluid and fill the remaining width. The problem is that when I add overflow: hidden to the rightColumn (it has a background color) the width shrinks to the min-width that Ive given it. Is there any way to make it expand to the remaining width space? Here is what I have for CSS currently:

#container {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    min-width: 800px;
}

#leftColumn {
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    width: 230px;
    position: relative;
    float: left;
}

#rightColumn {
    margin: 0px 0px 0px 250px;
    padding: 10px 10px 10px 10px;
    min-width: 530px;
    overflow: hidden;
    background: #fff;
}

Thoughts?

It works for me (FF 3.6.13). Check and see if there is anything else on the page (Styles or elements) that might be interfering. Also check different browsers. And if you are manually changing the page when testing, be sure to do a hard refresh on your browser (Ctrl-F5) to make sure that the new styles load.

It worked exactly as you described within my fiddle... shrinking to the min-width with overflow : hidden applied.

I hate nesting divs unnecessarily, but potentially this is a scenario where it may work for you?

http://jsfiddle.net/cVNaJ/

I turned your right column into a 'wrapper' where overflow : hidden content is contained within a child div, named after the original. Maybe this helps perchance?