adjusting width of a main div after hide/show of another div

I have a开发者_Go百科 main div which contains two divs. One for main content and one for sidebar content. Sidebar content is hidden/shown on clicking one link. So when the sidebar is hidden, I want the content div to occupy the whole space as the container div. But when sidebar content is shown, it should give some space to sidebar on left and adjust itself. Here is the code. Right now i am implementing using jquery. But not sure if there is a better way to do it. Thanks

You're almost there. I've updated your code. Basically you just want to put the sidebar first, float them both left, and get rid of the width defined on the main content.

<div id="container">
    <div id="sidebar">
        Sidebar Content
    </div>

    <div id="maincontent">
        Main Content
    </div>
</div>

#maincontent {
    float: left;
    border: 1px solid green;
    height: 400px;
}

#sidebar{
    float:left;
    width:200px;  
    border: 1px solid blue;
    top:10px;
    height: 200px;
}