Ehsan Tavakoli

Writing About .NET Programming and other stuff

Archive for the ‘table’ Category

HOW to design Tableless

leave a comment »

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.

Written by Ehsan Tavakoli

February 11, 2010 at 5:14 am

Posted in css, div, table, web design