The CSS/HTML architecture has a serious impact on the cost of development, integration, and maintenance of a web site.

Divide the page into a few areas.

• Top/header - the area that spans the top of the page
• Bottom/footer - horizontal span across the bottom of the page
• Middle - that which is between the header and footer

Thus, the HTML would be:

<div id="header">
</div>
<div id="middle">
</div>
<div id="footer">
</div>

Next, subdivide the middle into three columns - left, center, right, like so:

<div id="left">
</div>
<div id="center">
</div>
<div id="right">
</div>

Set up the layout in a base .CSS file. This should be a browser independent CSS file. Also create two other .CSS files, one for IE, one for Firefox to override any browser specific issues.

body
{
padding:0;margin:0;
height:768px;
width:1024px;
}

Place the colors in a color .CSS file. Place color (image) related dimensions in the color file, name your image files with their dimensions (x,y convention - where x=width, y=height).

body
{
color:#008;
background: #fff url('bg-1x768.gif') repeat-y top left;
}

You should have 5 files:

1. index.htm
2. base.css
3. color.css
4. ie.css
5. ff.css

Adjust the layout dimensions in base.css, using background colors to help you see. Once you have the layout stable, and as you would like it, under all the browsers you want to support (usually IE6, IE7, FF), begin integrating it with the other components. This approach can be used to skin a blog, build an application, or build a simple site.

If you find you are copying index.htm, over and over, and then modifying it - you’re working too hard. Switch to a hierarchical architecture using either SHTML, PHP or other languages that allow you to include content from different files. For example:

include 'header.php';
include 'left.php';
echo '<div id="center"><p>Page content here</p></div>';
include 'right.php';
include 'footer.php';

The assumption is that header, left, right, and footer.php would be the same for all the pages on the site. This approach allows you to modify the file once and affect the whole site.

Even if you have a very simple, small site, these practices will be helpful. Web sites tend to grow. They change, and if you have a good architecture, you can change them in a cost-effective manner.