Template Categories

templates categories Automobiles
templates categories Business
templates categories CSS Templates
templates categories E-Commerce
templates categories Education
templates categories Fashion
templates categories Greeting Cards
templates categories Hotels
templates categories Jewelry
templates categories kids
templates categories Models
templates categories Music - Films
templates categories Night Club
templates categories Real Estate
templates categories Restaurant
templates categories Software
templates categories Sports
templates categories Travel
templates categories Web-design
templates categories Wedding

Tutorial Categories

tutorial categories AJAX
tutorial categories CSS
tutorial categories Dreamweaver
tutorial categories Flash
tutorial categories FTP - File Transfer
tutorial categories HTML Emails
tutorial categories Javascript
tutorial categories Microsoft Excel
tutorial categories Microsoft Windows
tutorial categories Microsoft Word
tutorial categories MySql
tutorial categories Photoshop
tutorial categories Php
tutorial categories Windows Movie Maker
tutorial categories Xhtml / Html

windows vista tutorials click here for windows vista tutorials

3 COLUMN CSS LAYOUT - BOX MODEL - II

In part two I will show you the css. No tricks no hacks, just plain simple code. All the code is simple to understand. I have added a small summary at the bottom to explain the code.
/* intializing */

* {
padding: 0; margin: 0; /* to set the initial margin padding to 0 */
}
body {
font-family: verdana,arial,courier;
font-size: 12px;
color: #dadada;
}

#capsule {
width : 836px;
margin: 0 auto; /* to centerize the layout */
}

#header {
width: 814px;
height: 90px;
margin: 10px 0px 10px 0px;
border: 1px solid #999;
background-color: #333;
padding: 10px;
}

#left-col {
width: 190px;
height: 400px;
margin: 0px 10px 5px 0px;
padding: 5px;
border: 1px solid #ccc;
background-color: #333;
float: left;
}

#content {
width: 400px;
height: 400px;
margin: 0px 10px 5px 0px;
padding: 5px;
border: 1px solid #ccc;
background-color: #333;
float: left; display: inline;
}

#right-col {
width: 190px;
height: 400px;
margin: 0px 0px 5px 0px;
padding: 5px;
border: 1px solid #ccc;
background-color: #333;
float: left;
}

#footer {
width: 814px;
height: 50px;
margin: 0px 0px 10px 0px;
border: 1px solid #999;
background-color: #333;
padding: 10px;
clear: both; /* No floating elements allowed on either the left or the right side */
}
The CSS is pretty much self explanatory. We initialize the document with 0 padding and margin. Next comes the Div named capsule which is actually a wrapper for all the other divs. The margin 0 auto is to centerize the document ( webpage ). This div is followed by the middle section which contains 3 sections, namely a. The left col ( left column ). b. The right col ( right column ). c. The content col ( middle column ).

Apart from the padding, margin and border properties the height factor is also considered so as to have a three column design with equal heights for all the three middle divs. The middle section DIVS has float property set to left, which is very important. Finally the footer which has almost the same dimensions of header except for the height which is set at 50px, as we do not require more space here. You can keep less than 50px as this section will only contain the copyrights and other footer messages.

The final part is the HTML for the layout.
Previous The Box Model    Next The HTML code