Question

I have sidebars which can be turned on and off on specific pages, but I am trying to design a CSS layout that fills up the available space regardless of what sidebars are enabled. I have this so far:

CSS:

#container{
    width: 100%;
}
#sidebar-left, #sidebar-right, #content{
    height: 50px;

}
#sidebar-right{
    background: gray;
    width: 50px;
    float: right;
}

#sidebar-left{
    background: yellow;
    width: 50px;
    float: left;
}

#content{
    background: orange;
}

​
HTML:

<div id="container">
    <div id="content">content content content content content content content
        <div id="sidebar-left">sidebar</div>
        <div id="sidebar-right">sidebar</div>
    </div>
</div>

JSFiddle link:
LINK

The problem is the right column overlaps the main content column. However, I still want to keep the middle column at 100% so it fills up all the space when one of the sidebars is disabled.

Answer 1

Add a container that holds your main content, and apply overflow: hidden to it in order to apply a new block formatting context to it. You’ll need to rearrange the elements slightly. See below:

HTML

<div id="container">
    <div id="content">
        <div id="sidebar-left">sidebar</div>
        <div id="sidebar-right">sidebar</div>
        <div id="col-main">content content content content content content content contente conte tnoe o toa nao no ton oanota ona</div>
    </div>
</div>

​CSS

#container {
    width: 100%;
}

#sidebar-left, #sidebar-right, #content {
    height: 50px;

}
#sidebar-right {
    background: gray;
    width: 50px;
    float: right;
}

#sidebar-left {
    background: yellow;
    width: 50px;
    float: left;
}

#content {
    background: orange;
    height: auto;
}

#col-main {
    overflow:hidden;
}

​

Here’s a jsfiddle demonstrating it with columns: http://jsfiddle.net/aBbtN/8/

and without: http://jsfiddle.net/aBbtN/10/