<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="sidebar"> <ul> <li>MENU 1 OPTION</li> <li>MENU 1 OPTION</li> <li>MENU 1 OPTION</li> </ul> <ul> <li>MENU 2 OPTION</li> <li>MENU 2 OPTION</li> <li>MENU 2 OPTION</li> </ul> </div> <div class="container"> <div class="row"> <div class="col-md-12 main"> <div class="row"> <div class="col-md-4 main-cell"> </div> <div class="col-md-4 main-cell"> </div> <div class="col-md-4 main-cell"> </div> </div> <div class="row"> <div class="col-md-12 main-cell-full"> </div> </div> <div class="row"> <div class="col-md-12 main-cell-full"> </div> </div> <div class="row"> <div class="col-md-12 main-cell-full"> </div> </div> </div> </div> </div> <div class="secondary"> <div class="row"> <div class="col-md-12 secondary-cell-full"> </div> </div> <div class="row"> <div class="col-md-12 secondary-cell-full"> </div> </div> <div class="row"> <div class="col-md-12 secondary-cell-full"> </div> </div> <div class="row"> <div class="col-md-12 secondary-cell-full"> </div> </div> </div>

/*That's the important part*/ .sidebar{ position: fixed; width: 180px; height: 100%; overflow-y: auto; background-color: #4d4e50; color: white; } .container{ width: calc(100% - 480px); /*100% - the (sidebar + secondary)*/ margin-left: 180px; /*same as sidebar width*/ margin-right: 300px; /*same as secondary div width*/ } .secondary{ right: 0; top: 0; position: fixed; width: 300px; overflow-y: scroll; overflow-x: hidden; height: 100%; } /*Not really important, just to show an example*/ .main-cell{ background: #e0a025; border: 1px solid black; height: 100px; } .main-cell-full{ background: #006495; border: 1px solid black; height: 200px; } .secondary-cell-full{ background: #80a3d5; border: 1px solid black; height: 200px; }