How to make a separator between blocks #right and #left height in the entire container?

In the snippet used border-right, but it is only the size of the height of the block. How to make a separator that will be from the border with the nav panel to the border with the footer?

Preferably without JS

html, body { height: 100%; } .wrap { min-height: 100%; height: auto; margin: 0 auto -115px; padding: 0 0 115px; background-color: #FFF; } .footer { height: 115px; background-color: #000; color: #acacac; border-top: 1px solid #ddd; padding-top: 20px; } #right { border-right: 1px solid #ff0000; } 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="wrap"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">MySite.com</a> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-xs-4" id="right"> <p> some text here </p> </div> <div class="col-xs-8" id="left"> <p> another text here </p> </div> </div> </div> </div> <footer class="footer"> <div class="container-fluid"> <div class="row"> <div clas="col-xs-12"> <p> Some footer info </p> </div> </div> </div> </footer>

1 answer 1

For any of the blocks, set the pseudo-element: before or: after and set the corresponding height for it. For example: https://jsfiddle.net/0ctwa9co/

 .container { padding: 15px; border: 1px solid #000; } .left, .right { width: 49%; display: inline-block; height: 200px; position: relative; background: #dadada } .right { float: right } .left:after { display: inline-block; width: 1px; border-left: 1px solid #000; height: 115%; content: ''; position: absolute; right: -6px; top: -15px }

You can also set overflow: hidden for a container, and a height for the "separator" that is clearly greater than the container itself.