Knowledge Walls
Hyderabad, Andhra Pradesh, India
Two columns 50%-50% in Div Layouts of WEB UI Tips and Tricks
How to create div layout left column 50% and right column 50% 
Used three div's for this layout. Outside parent layout contains left and right layouts.

Here, used float: left for inner div otherwise can include display: inline-block. but inline block leaves some space in-between div's. So here used float: left;
<div id="layout">
   <div class="left-layout">I am at left side with 50% width</div>
   <div class="right-layout">I am at right side with 50% width</div>
   width: 100%;
   height: 100%;
   background-color: yellow;

div#layout div {
   float: left;

div#layout .left-layout {
   background-color: wheat;
   width: 50%;
   height: 100%;
div#layout .right-layout {
   background-color: green;
   width: 50%;
   height: 100%;

body {
   margin: 0px;
   padding: 0px;
   outline: none;
Demo & Output 
Best Lessons of "WEB UI Tips and Tricks"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details