Pages

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,

1 comment:

  1. A lot of thanks for your fresh update. Casino webmasters always look for casino affiliate programs to increase their revenue income from best casinos or poker rooms.

    ReplyDelete

Your comment will inspire me, Please leave your comment