html: <div class="container"> <div class="left"> <div class="left-container"> </div> </div> <div class="center"> </div> <div class="right"> <div class="right-container"> </div> </div> </div>
css:
<style> .container{ position: absolute; top:0; bottom: 0; left:0; right:0; } .center{ position: absolute; width: 200px; height: 100%; left:50%; margin-left: -100px; z-index: 100; background-color: red; } .left{ position: absolute; top:0; bottom: 0; left:0; width: 50%; } .right{ position: absolute; top:0; bottom: 0; right:0; width: 50%; } .left-container{ margin-right: 100px; background-color: #00a854; height: 100%; } .right-container{ margin-left: 100px; background-color: #ca900e; height: 100%; } </style>