Section footer scrolls along with text.

  /* css reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } * { box-sizing: border-box; } @media only screen and (min-width: 600px) { /* For tablets: */ .col-m-1 { width: 8.33%; } .col-m-2 { width: 16.66%; } .col-m-3 { width: 25%; } .col-m-4 { width: 33.33%; } .col-m-5 { width: 41.66%; } .col-m-6 { width: 50%; } .col-m-7 { width: 58.33%; } .col-m-8 { width: 66.66%; } .col-m-9 { width: 75%; } .col-m-10 { width: 83.33%; } .col-m-11 { width: 91.66%; } .col-m-12 { width: 100%; } } @media only screen and (min-width: 768px) { /* For desktop: */ .col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25%; } .col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50%; } .col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75%; } .col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100%; } } .row::after { content: ""; clear: both; display: block; } html { font-family: "Lucida Sans", sans-serif; } img { max-width: 100%; height: auto; } /* User styles */ @import 'https://fonts.googleapis.com/css?family=Hind'; body { background: #dbe2ec; } .container { width: 100%; height: 1000px; margin: 0 auto; } .container section { margin-right: 7%; margin-top: 150px; height: 100%; float: left; width: 23%; box-shadow: .5px 1px 8px rgba(30, 30, 30, 0.5); overflow: auto; } .rel { position: relative; height: 70%; } .container section>* { margin-left: 10%; margin-right: 10%; } /* left-column */ .container .left { margin-left: 8.5%; background: linear-gradient(#4f4f4f 10%, #3c3c3c 70%); font-family: 'Hind', sans-serif; font-weight: bold; color: #ddd; text-shadow: .5px .5px 2px #1c1c1c; font-size: 16px; } .container .left h3 { margin-top: 220px; margin-bottom: 20px; } .container .left h4 { font-size: 40px; line-height: 50px; } .container .left button { margin-top: 40px; padding: 10px; color: #000; text-shadow: none; box-shadow: 2px 2px 4px #1e1e1e; opacity: .66; transition: opacity .3s; } .container .left button:hover { opacity: 1; } .container .left button:active { transform: translate(0, 5px); } .container .bottom { position: absolute; bottom: 0; background: #fff; text-shadow: none; color: #000; width: 100%; height: 60px; line-height: 60px; margin-left: 0; padding-left: 10%; font-weight: bold; } .bottom a { color: inherit; } .bottom a:nth-child(2) { margin-left: 22%; } .bottom .fa-comment { float: right; margin-right: 10%; margin-top: 20px; } /* center column */ @import 'https://fonts.googleapis.com/css?family=David+Libre|Hind'; .container .center { font-family: 'David Libre', serif; color: rgba(30, 30, 30, .7); background: #f8f9fa; } .container .center p { font-size: 20px; line-height: 30px; text-align: justify; margin-top: 20px; } .container .center span { font-size: 100px; font-weight: bold; margin-right: 20px; float: left; color: rgba(30, 30, 30, 1); margin-top: 30px; margin-bottom: 20px; } .center .bottom { background: #fff; font-family: 'Hind', sans-serif; } /* right column */ .container .right { background: #fff; color: #000; } .right header { padding-top: 30px; position: relative; font-family: 'Hind', sans-serif; font-weight: bold; } .right header h3 { text-align: center; } .right header a { position: absolute; top: 60%; right: 0; color: #000; } .right article { height: 20%; } .right article:nth-child(2) { margin-top: 40px; } .right article .img { float: left; overflow: hidden; height: 50px; width: 50px; border-radius: 50%; } .right article img { max-width: 100%; min-height: 100%; } .right article .comment { float: right; width: 75%; font-family: 'David Libre', serif; } .right .comment span { font-weight: bold; } .right .comment time { color: rgba(30, 30, 30, 0.33); } .right .comment time::before { content: "\2022"; padding: 0 10px; } .right .comment p { color: rgba(30, 30, 30, 0.7); line-height: 25px; margin-top: 10px; } @media only screen and (max-width: 1300px) { .container section { margin: 0; margin-bottom: 50px; margin-left: 5%; width: 40%; float: left; } .container .right { width: 80%; float: none; margin: auto; clear: both; } } @media only screen and (max-width: 800px) { .container section { width: 100%; margin: 0% auto; float: none; padding-bottom: 60px; } .container .right { width: 100%; } .container section.left { margin-left: auto; } .rel { width: 80%; margin: 5% auto; float: none; } } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div class="container"> <div class="rel"> <section class="left"> <h3>MARK MANSON</h3> <h4>THE<br> DARK SIDE<br> OF THE<br> DIGITAL<br> NOMAD</h4> <button type="button" name="travel">TRAVEL</button> <div class="bottom bottom1"> <a href="#">CLOSE</a> <a href="#"><i class="fa fa-circle-o"></i></a> <a href="#"><i class="fa fa-dot-circle-o"></i></a> <a href="#"><i class="fa fa-circle-o"></i></a> <a href="#"><i class="fa fa-comment"></i></a> </div> </section> </div> <div class="rel"> <section class="center"> <p> <span>L</span>orem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus blanditiis quaerat fugiat minus libero, dicta asperiores esse architecto! Distinctio at, molestiae rerum. Itaque cupiditate quae omnis ea reprehenderit commodi rem consequuntur aperiam iste, dignissimos quaerat, maiores praesentium fugit tempore reiciendis minima ab, expedita quas assumenda facere. Sit nostrum optio aspernatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum repellat totam harum eveniet esse omnis corporis distinctio tenetur pariatur, quam. </p> <hr> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, nostrum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <div class="bottom bottom2"> <a href="#">CLOSE</a> <a href="#"><i class="fa fa-circle-o"></i></a> <a href="#"><i class="fa fa-dot-circle-o"></i></a> <a href="#"><i class="fa fa-circle-o"></i></a> <a href="#"><i class="fa fa-comment"></i></a> </div> </section> </div> <div class="rel"> <section class="right"> <header> <h3>COMMENTS(45)</h3> <a href="#"><i class="fa fa-times"></i></a> </header> <article> <div class="img"> <img src="img/Face.jpg" alt="image"> </div> <div class="comment"> <span>Jhonatan Dunn</span> <time>3 hours ago</time> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet. </p> </div> </article> <article> <div class="img"> <img src="img/Face.jpg" alt="image"> </div> <div class="comment"> <span>Jhonatan Dunn</span> <time>3 hours ago</time> <p> Lorem ipsum dolor sit amet, consectetur <adi></adi>pisicing elit. Lorem ipsum dolor. </p> </div> </article> <article> <div class="img"> <img src="img/Face.jpg" alt="image"> </div> <div class="comment"> <span>Jhonatan Dunn</span> <time>3 hours ago</time> <p> Lorem ipsum dolor sit amet, <consect></consect>etur adipisicing elit. Lorem ipsum dolor sit. </p> </div> </article> <article> <div class="img"> <img src="img/Face.jpg" alt="image"> </div> <div class="comment"> <span>Jhonatan Dunn</span> <time>3 hours ago</time> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing. </p> </div> </article> </section> </div> </div> </body> </html> </body> </html>