3 column template example

This is a simple example of how to create a 3 column template. It was written for a forum post at Website Bable for the user Baxter123 entitled CSS and HTML Problem and is purely for demonstration purposes only. Colors were picked randomly just to illustrate how it is done through CSS and can be changed anyway the user likes. My intent was to help someone new to web design and possibly teach others in the process. While I'm sure there might be better ways of doing things, this is only designed to show how I would accomplish this task.

This 3 column template passes validation for CSS Level 3 as well as XHTML 1.0 Transitional and should be cross browser compatible with today's standards. You can download the sample files and experiment with this template if you wish.

There are many ways in which one could expand upon this 3 column template, if you have any suggestions or requests you could post them on the thread mentioned above if you are a Website Babble member, or register for membership to the forum.

The problem with 3 a column template

The biggest problem with using a 3 column template is that usually the designer doesn't place their content first. To achieve a good SEO ranking your content and keywords should appear in within the first 50 words of the page. If you view the source code of this page you will see that I use floats and the "clear" function to put everything in its place. The content and keywords show up right after the top navigation.

This is the h3 header tag

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.