CSS Layout How to - Column based layout

Question

We would like to know how to column based layout.
Answer


<!DOCTYPE html>
<html>
<head>
<style>
.ad {<!--from  w ww.  j  av a  2  s. c  o m-->
  height: 100px;
  background-color: #efefef;
  padding: 10px;
}

.navigation {
  height: 40px;
  line-height: 40px;
  background-color: #efefef;
  padding: 10px;
}

/* 2 columns */
.column1of2, .column2of2 {
  float: left;
  width: 440px;
  background-color: #cccccc;
  padding: 10px;
  margin-top: 20px;
}

.column1of2 {
  margin-right: 20px;
}

/* 3 columns */
.column1of3, .column2of3, .column3of3 {
  float: left;
  width: 280px;
  background-color: #cccccc;
  padding: 10px;
  margin-top: 20px;
}

.column1of3, .column2of3, .columns1and2of3 {
  margin-right: 20px;
}

.columns1and2of3, .columns2and3of3 {
  float: left;
  width: 600px;
  background-color: #cccccc;
  padding: 10px;
  margin-top: 20px;
}

/* 4 columns */
.column1of4, .column2of4, .column3of4, .column4of4 {
  float: left;
  width: 200px;
  background-color: #cccccc;
  padding: 10px;
  margin-top: 20px;
}

.column1of4, .column2of4, .column3of4 {
  margin-right: 20px;
}

.columns2and3and4of4 {
  float: left;
  width: 680px;
  background-color: #cccccc;
  padding: 10px;
  margin-top: 20px;
}

/* 6 columns */
.column1of6, .column2of6, .column3of6, .column4of6, .column5of6,
  .column6of6 {
  float: left;
  width: 120px;
  background-color: #cccccc;
  padding: 10px;
  margin-top: 20px;
}

.column1of6, .column2of6, .column3of6, .column4of6, .column5of6 {
  margin-right: 20px;
}

.column1of3, .column1of4, .column1of6 {
  clear: both;
}

#footer {
  height: 40px;
  clear: both;
  border-top: 20px solid #ffffff;
  padding: 10px;
  background-color: #cccccc;
}

#page {
  padding: 0px 10px 10px 10px;
  width: 940px;
  background-color: #ffffff;
}

#frame {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  background-color: #ffffff;
}

body {
  background-color: #efefef;
  margin: 0px;
}

.clear {
  clear: both;
}
</style>
</head>
<body>
  <div id="frame">
    <div id="page">

      <div class="columns1and2of3 clear">sign in</div>
      <div class="column3of3">go to...</div>

      <div class="ad clear">ad</div>

      <div class="column1of3 clear">site name</div>
      <div class="column2of3">empty</div>
      <div class="column3of3">search</div>

      <div class="navigation clear">navigation and breadcrumb</div>

      <div class="column1of2 clear">article</div>
      <div class="column4of6">socia media links, tools, and other
        links</div>
      <div class="column3of3">most viewed articles and best sellers
        from the shop</div>

      <div class="navigation clear">footer</div>

    </div>
  </div>
</body>
</html>
The code above is rendered as follows: