3 column layout auto middle col width

Question

I am trying to make a 3 column layout webpage with percentage wrapper width, fixed (pixels) left and right side width and a varying middle column width but i cannot get it to work for the middle column. Here is the source:

html

<aside class="left">
    <span>Categories</span>


</aside>

<section>
    <span>Main</span>

</section>

<aside class="right">
    <span>Test</span>

</aside>

css

* {
    margin: 0px;
    padding: 0px;

}

html, body {
    height: 100%;
    width: 100%;

}

.container {

    height: 100%;
    width: 100%;

}

.container > aside.left {
    float: left;
    width: 197px;
    border-right: black dashed 3px;

}

.container > section {
    float: left;
    width: auto;


}

.container > aside.right {
    float: left;
    background-color: #005f98;
    width: 200px;

}

Answer 1

You could replace your floats with absolutely positioned sidebars:

<aside class="left">
    <span>C</span>
</aside>

<section>
    <span>M</span>
</section>

<aside class="right">
    <span>T</span>
</aside>

And

.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    display: block;
    background: #ffe;
    height: 100%;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    display: block;
    background: #fef;
    height: 100%;

}
section {
    display: block;
    margin: 0 50px; /* Margin sized to match the sidebars */
    background: #fee;
}

Live: http://jsfiddle.net/ambiguous/puPbu/

The colors and sizes are just to clarify where everything is. If you're going to put a wrapper <div> around the whole thing then you'll want to have position: relative on it to get the absolutely positioned sidebars in the right place.

Answer 2

If you don't have to support IE7, this will work :

* {
    margin: 0px;
    padding: 0px;    
}
html, body {
    height: 100%;
    width: 100%;    
}

.container {
    display: table;    
    height: 100%;
    width: 100%;
    min-width: 600px;

}
.container > aside, .container > section {
    display: table-cell;
    width: auto;
}
.container > aside.left {
    width: 197px;
    border-right: black dashed 3px;
}

.container > aside.right {
    background-color: #005f98;
    width: 200px;
}

Answer 3

in CSS3 you can use

#multicolumn{
    column-count: 3
}

check it on http://jsfiddle.net/ilumin/w7F7c/

reference: http://www.quirksmode.org/css/multicolumn.html

Answer 4

Have you looked at the flexible box model? http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Answer 5

Try setting the widths according to percentages, so for example:

.container > aside.left {
float: left;
width: 31%;
border-right: black dashed 3px;

}

.container > section {
float: left;
width: 31%;


}

.container > aside.right {
float: left;
background-color: #005f98;
width: 31%;

}

Thats how i've overcome this problem before.

Answer 6

If you specify width and float for the left and right column, the middle column will automatically fill up the gap:

http://jsfiddle.net/xHnDX/4/

As you can see, the content div actually overlaps the side divs, although the content will stay between them. If you like, you can add an extra container to compensate for the width of the content div as shown here:

http://jsfiddle.net/YauQc/