Dynamic css layout

I am just wondering if there is a technique to style a website in such a that my content area dynamically adjusts it's width?

The scenario is that I have 2 sidebars and 1 central content area. If one of the sidebars is missing, I would like the content area takeup the extra space left by the abscent sidebar. And if both sidebars are missing, I would like the content area to fully expand.

I know %s can be a potential solutio开发者_如何学Pythonn but I don't know how I might setup the dynamic expanding / contracting features I discribed above.

The only CSS-only solution I could think of makes the following assumptions:

1. Your users are using up-to-date browsers, supporting the adjacent-sibling selector.
2. Your right-column appears before the main-content column.

The approach, demonstrated below, works using pure css, however it also uses jQuery to effect the removal (from the DOM) and recreation (in the DOM) of the right-column: jQuery does not affect/effect the styling, or dimensions, of any content (though it does also toggle the text in the link by which the column is removed/recreated).

That said, demonstration html mark-up is below:

<div id="contentWrap">
    <div id="sidebar">
        <!-- navigation -->
    </div>
    <div id="rightColumnAndMainContent">
        <div id="rightColumn">
            <h2>References</h2>
            <!-- a list of links -->
        </div>
        <div id="mainContent">
            <p><!-- Lorem ipsum text in the demo... --></p>
        </div>
    </div>
    <div id="footer">
        <p><a href="#" class="remove">Remove the footer</a></p>
</div>

And the CSS:

#contentWrap {
    width: 900px;
}

#sidebar {
    float: left;
    width: 110px;
}

#rightColumnAndMainContent {
    position: relative;
    margin-left: 120px;
}

#rightColumn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #f00;
    width: 140px;
}

#mainContent {
    background-color: #ffa;
    margin-right: 0;
}

#rightColumn + #mainContent {
    margin-right: 150px;
}

#footer {
    text-align: center;
    clear: both;
    border-top: 6px solid rgba(0,0,0,0.6);
}

This works as the adjacent-sibling selector (#rightColumn + #mainContent is more specific than the basic id-selector (#mainContent), which means that while the #mainContent has a defined margin-right: 0; it's overruled if the #mainContent immediately follows the #rightColumn, which it can only do if the #rightColumn is present in the mark-up.

This feels kludgy, but it does work (at least within the confines of the JS Fiddle demo).

References:

• adjacent-sibling + CSS selector.
• Adjacent-sibling selector cross-browser support.

I think 960 grid system is your answer. Take a look at it.

Maybe you are looking for something like Adaptive CSS-Layouts.

display: table-cell can easily do this. Browser support: http://caniuse.com/css-table

See: http://jsfiddle.net/3FW6w/

<div class="container">
    <div class="leftSidebar">left</div>
    <div class="content">content</div>
    <div class="rightSidebar">right</div>
</div>

.container {
    border: 2px solid #f0f;
    width: 400px;
    margin: 0 auto;
    display: table
}
.container > div {
    border: 2px dashed #444;
    display: table-cell
}
.leftSidebar, .rightSidebar {
    width: 80px
}