create dynamic growing width for content

Question

Hello I know there is alot of questions about dynamic width for contents.. but this specific question I couldn't find a good answer for.

I have the following setup for my website ( some pages )

         +--------------+---------------------------------+
     |              |                                 |
     |  Sidebar     |       Content                   |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     +--------------+---------------------------------+

And the total width is 980px

But on some of these pages I don't use a sidebar so there is blank space on the left.. how can I solve this by letting the content page flow to the left when there is no sidebar?

     +--------------+---------------------------------+
     |                                                |
     |                      Content                   |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     +--------------+---------------------------------+

I have the following html structure

I gave both the aside and content divs a fixed width and the aside has a float left and the content a float right.

Is there a good easy way to achieve this?

Answer 1

Here's a Fiddle that shows two cases: one with a sidebar and one without it.

One thing to remember is, that a display: block property makes an element go with all of the available width, despite the content. And that's what .content does - the float: left makes it appear right next to the sidebar if present, and fills all available space.

HTML

<div class="parent">
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
</div>

<br>

<div class="parent">
    <div class="content">Content</div>
</div>

CSS

.parent {
    border: 1px solid;
    margin: 0px auto;
    height: 100px;
    width: 300px;
}

.sidebar {
    height: 100%;
    width: 100px;
    float: left;
    background: rgb(255, 176, 176); /* Light Red */
}

.content {
    height: 100%;
    background: rgb(148, 148, 255); /* Light Blue */

}

Answer 2

HTML

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

CSS

#main{
    width: 980px;
    margin: 0 auto;
}
#main:after{
    content: '';
    display: block;
    clear: both;
}
#sidebar{
    float: left;
    width: 200px;
}
#content{overflow: hidden;}