HOW to design Tableless

As, I started introducing DIV tag in my last post. Here is a simple sample that how we can use div in our designs.

In this approach, we want to create a two rows/three columns webpage. We call them ‘Header’, ‘LeftCol’, ‘Main’, ‘RightCol’

First of all we need a proper CSS:

<style type="text/css">
body {
  margin: 0;
  padding: 0; 
}

#header {
  background: #CCFF33;
  height: 100px;
}

#leftcol {
  background: #FF6633;
  float: left;
  width: 150px;
  height: 500px;
}

#rightcol {
  background: #FF6633;
  float: left;
  width: 150px;
  height: 500px;
}

#main {

  background: #fff;
  float: left;
  width: 600px;
  height: 500px;
}


div.fixed
{
    width: 900px;
    margin: 0px auto;
}


}
</style>

CSS is almost everything when you are designing your layout with ‘div’

Here is the sample HTML code:

<div class="fixed">
  <div id="header">Header Section</div>
  <div id="leftcol">Left Section</div>
  <div id="main">Main Section</div>
  <div id="rightcol">Right Section</div>
</div>

Just remember I used ‘fixed’ class to put all elements in center of page. And not matter what user’s browser size is, content gets 900px of its window.

Advertisements