Given the following html structure:
<div id="wrapper">
<div id="top" class="bar"></div>
<div id="outer">
<div id="inner"></div>
</div>
<div id="bottom" class="bar"></div>
</div>
You can use the following styles:
#wrapper {
position:relative;
height:200px;
}
#outer {
background-color: red;
overflow-y:auto;
height: 200px;
}
#inner {
color: white;
font-weight: bold;
margin-left: auto;
margin-right: auto;
background-color: blue;
margin:50px;
position:relative; z-index:1;
}
.bar {
height:50px;
z-index:2;
position:absolute;
background:red;
left:0;
right:20px;
}
#bottom {bottom:0;}
#top {top:0; }