Why doesn't my right column scroll? Also, how can I have the scrollbar of my left column on right side of my left column because when my two columns have contents, the scroll of the two columns are in the same place.
I've position:fixed with height:100%.
Here's the code:
<body id="top">
<div style="height: 100%;" id="container">
<div style="height: 100%; width:100%; position:absolute;" id="o-wrapper" class="o-wrapper">
<div class="columnsContainer">
<div class="leftColumn">
<div style=" margin:0px auto; border:0px solid #fff; width:auto;">
<div class="lazy">
<img class="imgstylefirst" src="img/3.jpg" alt="" />
<br/>
<div class="creditstyle">
Crop Top, Six Crisp Days. Skirt, Topshop. Clutch, Fendi. Rings, Amarilo and Pushmataaha. Shoes, Boohoo.
</div>
</div>
<div class="lazy">
<img class="imgstyle" src="img/2.jpg" alt="" />
<br/>
<div class="creditstyle">
Rings, Amarilo, Pushmataaha and Push&Co.
</div>
</div>
<div class="lazy">
<img class="imgstyle" src="img/4.jpg" alt="" />
<br/>
<div class="creditstyle">
Top, Six Crisp Days. Shawl, Unif. Rings, Amarilo.
</div>
</div>
<div class="lazy">
<img class="imgstyle" src="img/5.jpg" alt="" />
<br/>
<div class="creditstyle">
Jacket, AZUL by moussy. Earrings, Artelier Mx. Rings, Amarilo.
</div>
</div>
<div class="lazy">
<img class="imgstyle" src="img/6.jpg" alt="" />
<br/>
<div class="creditstyle">
Jacket, AZUL by moussy. Earrings, Artelier Mx. Rings, Amarilo.
</div>
</div>
</div>
</div>
<div class="rightColumn">
<div style="padding:70px 0px 50px 0px; margin: 0px 20px;">
<a href="#">PREVIOUS</a>
|
<a href="#">ALL</a>
|
<a href="#">NEXT</a>
</div>
<div style="margin: 0px 20px;">
<span style="100%" class="newstitle">Y</span>
<p style="margin-top:-7px;">Preview</p>
<hr style="margin: 15px 0 30px 0;" class="gridnews">
<div class="flipper">ONE</div>
<div style="margin:10px 0px 40px 0px; display:block" class="flip">
blablabla
</div>
<div class="flipper">TWO</div>
<div style="margin:10px 0px 80px 0px;" class="flip">
Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>Photographer
<br/>Stylist
<br/>Makeup
<br/>Hair
<br/>Model
<br/>
</div>
<div style="margin-top:20px;" class="flipper">THREE</div>
<div style="margin-top:10px;" class="flip">
blablabla
</div>
<div style="margin-top:20px;" class="flipper">FOUR</div>
<div style="margin-top:10px;" class="flip">
blablabla
</div>
<div style="margin-top:20px;" class="flipper">FIVE</div>
<div style="margin-top:10px;" class="flip">
blablabla
</div>
<div style="margin-top:20px;" class="flipper">SIX</div>
<div style="margin-top:10px;" class="flip">
blablabla
</div>
<div style="margin-top:20px;" class="flipper">SEVEN</div>
<div style="margin-top:10px;" class="flip">
blablabla
</div>
<div style="margin-top:20px;" class="flipper">EIGHT</div>
<div style="margin-top:10px;" class="flip">
blablabla
</div>
<div style="margin-top:20px;" class="flipper">NINE</div>
<div style="margin-top:10px;" class="flip">
blablabla
</div>
<div style="margin-top:20px;" class="flipper">TEN</div>
<div style="margin-top:10px;" class="flip">
blablabla
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Fix your styles like this:
.columnsContainer {
height: 100%;
}
.leftColumn {
margin-right: 600px;
background: #fff;
height: 100%;
overflow-y: scroll;
}
These changes seem to work for me.