Simple two (or multi) column layout that works

Hi There!

2 Column layout is very painful does not work often. Here is a very simple 2 colum layout that works.

<style>

.grid{
  margin:0px;
  padding:0px;
  overflow: hidden;
}

.grid:after{
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow:hidden;
}
.left{
  float:left;
  margin:0px;
  padding:0px;
  overflow:hidden;
  width:49%;

}
.right{
  float:right;
  margin:0px;
  padding:0px;
  overflow:hidden;
  width:49%;
}
</style>
<div class="grid">
      <div class="left">
   Left Stuff Goes Here 
      </div>
      <div class="right">
   Right Stuff Goes Here 
      </div>
</div>

To make 3 or more column layout follow the same strategy , just distribute the width of children (e.g. left and right) and keep adding them, all the children will float left and last child will float right. Such multicolumn layout can be well nested to achieve complex grids .
 Thanks,