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

In this 3 part tutorial I will show you how to create a complete CSS based zero pixel margin fixed layout ( 3 column with header and footer ). When I say zero pixel " margin ", I mean that the calculations of all box elements must match with the total width of the layout.A single pixel in excess will break the layout.

Here are the calculations for our layout.

Full Width of the layout - 836px called capsule
THIS IS WHAT WE ARE GOING TO CREATE
css 3 column layout
THE HEADER BOX

width - 814PX ( plus 20px padding [ left + right ] 2px border [ right & left ] )
Total = 814px + 20px + 2px ( 836px )
THE MIDDLE BOX

left col [ 190px basic ] - total 212px ( 10px padding 2px border 10px margin )
content [ 400px basic ] - total 422px ( 10px padding 2px border 10px margin )
right col[ 190px basic ] - total 202px ( 10px padding 2px border )

Total = 212px + 422px + 202px ( 836px )
THE FOOTER BOX

width - 814PX ( plus 20px padding [ left + right ] 2px border [ right & left ] )

Total = 814px + 20px + 2px ( 836px )
To understand the CSS BOX MODEL and how the HTML elements are referenced check the image on part III tutorial page. In our case the DIV tag is used to create boxes for other HTML elements. OK so lets start withe the CSS part first

Next The CSS code