Scroll Overflow Div

Vertically aligned overflow scroll in div form.

by Ken Watanabe

HTML

<div class="demo">
    <div class="wrap">
        <div class="top"></div>
        <div class="content">
           <br/>
            <p>This painting is very different, you do what you want; you feel very free when you paint. I had always the feeling, I wasn’t sure that I’m good, not at all, but I was always sure, I’m allowed to do this.</p>
            <p>Tate Modern is staging a major retrospective of painter Gerhard Richter, considered one of the world's greatest living artists. Here, curator and Tate director Nicholas Serota talks to him about the enduring power of his work</p>
            <ul>
                <li><span>NS</span>Over fifty years, you have worked in sculpture, in drawing, in photographs, by painting over photographs, but you have always remained very loyal to painting. Of course you are known as a painter, but in the contemporary world such loyalty to painting is quite unusual.</li>
                <li><span>GR</span>A lot of people find other mediums more attractive - put a screen in a museum and nobody wants to look at the paintings any more. But painting is my profession, because it has always been the thing that interested me most. And now I'm of a certain age, I come from a different tradition and, in any case, I can't do anything else.I'm still very sure that painting is one of the most basic human capacities, like dancing and singing, that make sense, that stay with us, as something human.</li>
                <li><span>NS</span>Over fifty years, you have worked in sculpture, in drawing, in photographs, by painting over photographs, but you have always remained very loyal to painting. Of course you are known as a painter, but in the contemporary world such loyalty to painting is quite unusual.</li>
                <li><span>GR</span>A lot of people find other mediums more attractive - put a screen in a museum and nobody wants to look at the paintings any more. But painting is my profession, because it has always been the thing that...

CSS

/* Primary CSS */
 .wrap {
    width: 49%;
    height: 90%;
    float: left;
    margin: auto;
    position: absolute;
    padding: 0;
    top: 0;
    bottom: 0;
}
.top, .bottom {
    height: 30px;
    width: 100%;
    position:absolute;
    left:0;
    z-index:10;
}
.top {
    top:0;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}
.bottom {
    bottom:0;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}
.content {
    width: 100%;
    padding-right: 30px;
    height:100%;
    overflow-y:scroll;
    margin: auto;
}
/* Secondary CSS */
 body {
    width:...