Question

Mixing both liquid and fixed elements in my CSS layout seems troubling. I’ve tried various settings, but I can’t get it just right.

I am trying to create a template where the main content is surrounded by a content on each side (top, left, right, bottom).

<div id="container">
<div id="header">k</div>
<div id="left-column"></div>
    <div id="center-column"><h1>Main Page</h1> Liquid layout trial</div>
<div id="right-column"></div>
<div id="footer"></div>
</div>​

Top bar (header) should have fixed height.
Left column should have fixed height/width
center column should float in both height/width depending on viewport and content
right column should have fixed height/width.
footer should have fixed height

Here’s my CSS:

#header{
    background-color: blue;
    height 50px;
    color: white;
    clear:both;
}

#left-column{
    background-color: green;
    width:100px;
    height:400px;
    float: left;
}

#center-column{
    background-color: yellow;
    float:left;
}

#right-column{
    background-color: red;
    float:right;
    height: 400px;
    width: 100px;
}

#footer{
    clear: both;
    height: 50px;
    background-color: pink;
}

The center-column does not seem to use it’s whole width/height as I would expect the whole area between the four "sides" to be yellow.

Another issue is with limiting the viewport, the right column drops below the center column

I also do not understand why my header needs content to be displayed. If I remove the character "K" it’s not visible.

I’ve got an fiddle of this example found here: http://jsfiddle.net/jasonBr81/vZDND/2/

Answer 1

If you don’t care for IE7, you can go with this. You’ll gain another advantage, not only that your middle column has no fixed width:

All columns will always have the same height.

• you could easily add a vertical border in one container over the whole height
• you’ll never have the floating problem you described

CSS

<style>
    #header {
        height:             50px;
        background-color:   blue;
        color:              white;
    }

    #left-column{
        display:            table-cell;    
        height:             400px;
        background-color:   green;
    }

    .left-column-inner {
        width:              100px;
    }

    #center-column {
        display:            table-cell;
        width:              100%;
        background-color:   yellow;
    }

    #right-column {
        display:            table-cell; 
        background-color:   red;
    }

    .right-column-inner {
        width:              100px;
    }

    #footer{
        clear: both;
        height: 50px;
        background-color: pink;
    }
</style>

HTML

<div id="container">
    <div id="header">HEADER</div>

    <div id="left-column">
        <div class="left-column-inner">LEFT</div>
    </div>
    <div id="center-column">
            <h1>Main Page</h1>
            <p>
                Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial 
                Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial 
            <p>
    </div>
    <div id="right-column">
        <div class="right-column-inner">RIGHT</div>
    </div>

    <div id="footer">FOOTER</div>
</div>​