<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="row"> <div class="col-md-8" id="left"> <div class="full-bg"></div> </div> <div class="col-md-4" id="right"> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents</p> <p>Left contents END</p> </div> </div> </div>

.container-fluid { margin: 0; overflow: hidden; height:100%; } @media (min-width: 768px){ #left { position: absolute; top: 0px; bottom: 0; left: 0; width: 60%; overflow-y: scroll; } #right { position: absolute; top: 0; bottom: 0; right: 0; overflow-y: scroll; width: 40%; } } #left { background-color: #FC6E51; text-align: center; height:100%; overflow-y:hidden; padding:0; margin:0; } .full-bg { background-image: url('https://source.unsplash.com/random'); background-position: center center; background-size: cover; height:100%; } #right { height:100%; background-color: #fff; text-align: center; } h4{ padding: 10px 0; }