CodePen

HTML

            
              <div class="container">
  
  <div class="half left">
    
  <div class="content red ">
  </div>
    
  </div>
  
  <div class="half right">
  
    <div class="content blue">
    </div>
    
</div>  
            
          
!

CSS

            
              * {
  box-sizing:border-box;
}

html, body {
  height:100%;
}

.container {
  min-height:100%;
  background:linear-gradient(left, black 50%, white 50%, white);
 }

.half {
  width:50%;
  float:left;
  height:100%;
}

.right {
  float:right;
}

.content {
  width:45%;
  height:200px;
  background:green;
}

.red {
  float:right;
  background:red;
}

.blue {
  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 ..................