Dusty Roberts Dusty Roberts - 4 months ago 24
HTML Question

3 column, fixed header, sidebars fixed, content scrollable

Can anyone assist me with the following div layout? I have tried a couple of solutions, however, the only way i have been able to accomplish this is using tables.

site layout

I had a look at Holy Grail 3 Column Layout, however, this layoyt is not 100% height, and header is not fixed, i also need only the content to scroll, the sidebars needs to be fixed 100% height

Answer

I have created a working fiddle as per your requirements:

Here is working fiddle - UPDATED to include fixed header ONLY TOP BAR IS FIXED

The important thing to note is the structural layout of the divs... notice that the .center is AFTER the .right

<div class='wrap'>
    <div class='head'>Header</div>
    <div class='bodywrap'>
        <div class='left'>left</div>
        <div class='right'>right</div>
        <div class='center'>center center center center center center center center center center center center ... blah</div>
    </div>
 </div>

and the css is:

JUST HEADER FIXED:

html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%} << UPDATED for fixed header
.bodywrap{margin-top:100px;width:102%;margin-left:-1%} << UPDATED - Terrible hack and you may find something more elegant
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;}
.right{float:right;}

.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}

HEADER AND SIDEBARS FIXED (Also was able to fix dirty hack for .left and .right undersizing

html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%}
.bodywrap{margin-top:100px;margin-left:-8px}
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;position:fixed}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;margin-right:191px}
.right{position:fixed;right:0}

.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}

Here is with top and sides fixed center scroll liquid center column (and no gaps on .left and .right)

It's basic use of floats but the structural markup layout is key ;)