Question

I have two <div>s side by side, in a two column layout. I want to make the second div width auto fit to the browser width… but my CSS isn’t quite working:

<style>
#sidebar{
    float:left;
    width:230px;    
    min-height:10px;
    overflow:hidden;
    margin:auto;
}

#content{
    float:left;
    width:auto;
    min-height:10px;
    overflow:hidden;
    margin:auto;
    background-color:#cddfea;
}
</style>


<div id="sidebar">aa</div>

<div id="content"></div>

How can I make the width of the “content” div fit the rest of the browser window while my sidebar has a width of 230px?

Thank you. 🙂

Answer 1

Try this: jsFiddle

HTML:

<div id="sidebar">aa</div>
<div id="content">bb</div>

CSS:

#sidebar{
    float:left;
    width:230px;    
    min-height:10px;
    overflow:hidden;
    margin:auto;
    background: #faa;
}

#content{
    min-height:10px;
    overflow:hidden;
    margin-left:230px;
    background:#cddfea;
}