DIV based web design

These days, more and more design studios are 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 HTML

<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="footer">Footer</div>

Image DIV description

Article Reference :

http://www.colorplexstudios.com/articles/div_web_design_tutorial/