CODEWITHSUNDEEP
csscss-float
Kman
Kman

Reputation: 4991

CSS layout with both fixed and liquid columns

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.

enter image description here

Another issue is with limiting the viewport, the right column drops below the center column enter image description here

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

enter image description here

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

Upvotes: 0

Views: 1013

Answers (1)

insertusernamehere
insertusernamehere

Reputation: 23580

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>​

Upvotes: 1

Related Questions