CSS freeze

by Hilarius Doren

HTML

<div id="container">
<div id="content" class="pad">    
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
16<br>
17<br>
18<br>
19<br>
20<br>
21<br>
22<br>
23<br>
24<br>
25<br>
26<br>
27<br>
28<br>
29<br>
30<br>
31<br>
32<br>
33<br>
34<br>
35<br>
36<br>
37<br>
38<br>
39<br>
40<br>
41<br>
42<br>
    </div>
    <div id="topbar" class="bar"> </div>
    <div id="bottombar" class="bar"></div>
    <div id="leftbar" class="vbar"></div>
    <div id="rightbar" class="vbar"></div>
</div>

CSS

#container{
    position:relative;
    height:300px;
    width:300px;
    border:1px solid red;
}
#content{
    height:200px; 
    width: 200px;
    padding: 50px;
    overflow-y: auto;
    background-color: #cef;
}
.bar {
    position:absolute;
    width: 280px;
    height: 50px;
    background-color:#bcd;
}
.vbar {
    position:absolute;
    width: 50px;
    height: 280px;
    background-color:#bcd;
}
#topbar{
    top:0;        
}
#bottombar{
    bottom:0;
}
#leftbar{
top:0;        
}
#rightbar{
right:20px;        
    top:0;
}