Question

I am having a left div width a fixed width of 200 px, then I want the content area to take the space that is left. How can I solve that? I have done this…but it doesn’t work.

   #sidebar {
        float:left;
        width:200px;
        height:100%;
        background-color: blue;
    }

#mainContent {
    float:left;
    width: // USE WHATEVER SPACE IS LEFT;
    height:100%;
    background-color: red;
}

Answer 1

Have a look at this code:

http://jsfiddle.net/Ffx8R/

CSS:

#sidebar {
    float:left;
    width:200px;
    height:100%;    
}

#mainContent {

    padding-left:200px;
    height:100%;

    border:1px blue solid;
}
#container
{


    height:200px;
    clear:both;
}

HTML:

<div id="container">
    <div id="sidebar">here is sidebar info</div>
    <div id="mainContent">main Content info</div>
</div>