Div Based Design

It guys , these days, switching over to the recommended web design stratetgy of using DIV tags over tables. CSS has many advantages over traditional tables for more complex layouts, but in this tutorial we'll be discussing the basics of DIV based web design. We'll simply lay out a common web design layout and let you tinker with it from there.

To start with, I'll display all the CSS code we're going to use to layout the page, followed by the HTML that will actually display it.

The CSS Code
body {
margin: 0px;
padding: 0px;
}
#header {
background: #438a48;
width: 100%;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 25%;
height: 700px;
}
#content {
background: #000;
float: left;
width: 75%;
height: 700px;
}
#footer {
background: #df781c;
clear: both;
width: 100%;
}

The Tutorial

Let me explain the tags involved. First, we set the body of your document to have zero margins on all four sides, as well as zero padding on all four sides. This will allow your data to be flush against the edge of the page on your browser. Next, we create your header region, setting it's width to 100% of your browsers width, and giving it a background of the hex color #438a48. We are not going to give the header section a static height value, as we're going to let the content within be the judge of that. Next, we'll setup our left column. We start by giving it a background color, specifying a width of 25% of the browsers width, and a static height of 700 pixels. We're also going to "float" our div to the left. Floating allows more than one DIV tag to be on a line. This is going to come in handy for our content section. Now, see the content section. Everything should look familiar. We're going to float the content section to the left again, pushing it flush against the left column. The two width percentages of the left column and the content section should equal 100%. Our last section is the footer with the same type of tags as the rest, except the "clear" tag. Clearing a DIV tag has 4 options. Left, Right, Both, and None. When you specify a clear on a DIV it tells the browser that it cannot put another div on the left or right side of that div tag. This is a very useful specification. I encourage you to play with this CSS tag as specified by the W3C page.

After you have setup the CSS styles of your DIV's, the last step is to create your DIV's in your HTML with their respective ID tags. Your browser will do the rest!