CSS: Auto resize div to fit container width

Question

I have two <div>: left and contents. These two are inside wrapper div that has min-width:960px;. left has fixed width, but I want to make content flexible with min width of 700px and if screen is wider, stick it to the right bound of screen.

CSS:

#wrapper
{
    min-width:960px;
    margin-left:auto;
    margin-right:auto;
}
#left
{
    width:200px;
    float:left;
    background-color:antiquewhite;
    margin-left:10px;
}
#content
{
    min-width:700px;
    margin-left:10px;
    width:auto;
    float:left;
    background-color:AppWorkspace;
}

JSFiddle: http://jsfiddle.net/Zvt2j/

Answer 1

You can overflow:hidden to your #content. Write like this:

#content
{
    min-width:700px;
    margin-left:10px;
    overflow:hidden;
    background-color:AppWorkspace;
}

Check this http://jsfiddle.net/Zvt2j/1/