CodePen

HTML

            
              <div class='left'>
</div>
<div class='right'>
</div>

<div id='container'>
 <div id='content'>
  <div class='leftarea'>
  </div>
  <div class='rightarea'>
  </div>
 </div>
</div>
            
          
!

CSS

            
              body{
  padding: 0;
  margin:0;
}

.right{ position: fixed; top: 0; bottom: 0; right: 0; left: 50%; z-index:-1; background: #FFF; }

.left{ position:fixed; top: 0; bottom: 0; left: 0; right: 50%; background: #000; z-index:-1; }

#container{
  width:100%;
  height:100%;
  display:block;
  margin:0 auto;
}

#content{
  width:600px;
  height:100%;
  min-height:200px;
  margin:0 auto;
}

.leftarea{
  width:50%;
  height:200px;
  float:left;
  background:red;
}

.rightarea{
  width:50%;
  height:200px;
  float:right;
  background:blue;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................