DIV Tags: 2 Column Template Tutorial

Yesterday I posted an article introducing some really handy DIV tag style features. Today I wanted to take that a step further and use those styles to build a very simple website frame.

The frame we’re going to build is going to have a 5 DIVs initially, with more added at the end to style the frame. I am going to build a fixed width template set to 480px wide, centered with a 1 pixel black border.

The key DIV styles that we will be using in this example are:

  • Float
  • Border
  • Padding
  • Margin
  • Background
  • Width
  • Height

Step 1: The Header

There are a few different ways you can build a basic site template. I personally like to start with logic, which in this case is the top. So we want to code in the header, keeping in mind that we need to include things like padding.

<div style=”width: 480px; height: 50px; border: 1px solid #000000; margin: 0pt auto;”>

The result:

Notice I also included a fixed height for the header of 50 pixels.

Step 2: The Container

Before we can add the main content and sidebar areas we need to add the container. This will be a DIV that is not viewable to the user in the end product (in this example), however I am going to make it viewable now and then remove it at the end so you can see the result/purpose. I have put the newly added code in red.

<div style=”width: 480px; height: 50px; border: 1px solid #000000; margin: 0pt auto;”>
<div style=”width: 480px; border: 1px solid #000000; margin: 2px auto;”>

The result:

You’ll notice that I changed the margin for this new DIV. By adding the 2px before and after the “auto” it added a 2 pixel gap between the container and the header. I also did not include any “height” styling, which has resulted in the DIV looking flat. This will change.

Step 3: The Main Content and Sidebar

Next we want to add the main content area and the sidebar to the frame. The code for these will go INSIDE the container DIV tags. I also added an extra DIV in there (hightlighted in blue) that closes off the 2 new DIVs and ensures when we load the footer that it loads without any overflow from the previous DIVs.

<div style=”width: 480px; height: 50px; border: 1px solid #000000; margin: 0pt auto;”>
<div style=”width: 480px; border: 1px solid #000000; margin: 2px auto;”>
<div style=”width: 376px; height: 100px; float: left; border: 1px solid #000000;”>
<div style=”width: 100px;
height: 100px; float: right; border: 1px solid #000000;”>

<div style=”clear: both;”></div>


The result:

As you can see, the structure is now starting to take shape.

Step 3: The Footer

The footer is much like the header, and is a basic DIV that loads underneath the current structure. One piece of extra code we need to add to the footer is the “clear” attribute, which tells the code to stop all the current tags and start from this location. By adding it to the footer, we’re able to ensure the main content and sidebars don’t flow over into the footer content. Previously I had this code in it’s own div. What we’re going to do is take the previously highlighted blue code and add that to the footer.

<div style=”width: 480px; height: 50px; border: 1px solid #000000; margin: 0pt auto;”>
<div style=”width: 480px; border: 1px solid #000000; margin: 2px auto 2px;”>
<div style=”width: 376px; height: 100px; float: left; border: 1px solid #000000;”>
<div style=”width: 100px; height: 100px; float: right; border: 1px solid #000000;”>
<div style=”clear: both;”>
<div style=”width: 480px; height: 25px; border: 1px solid #000000; margin: 2px auto;”>

The result:

Step 4: Final Styling

The site is taking shape. What we need to do now is add some extra styling. In particularly, we want to:

  • Remove the border from the container
  • Add 4 new DIVs to add padding (optional)
  • Colour the background of the Header (blue), sidebar (yellow) and footer (blue)
  • Adjust the width of the main content to allow spacing between it and the sidebar
  • Add basic text to highlight each area.

<div style=”background: #000066; width: 480px; height: 50px; border: 1px solid #000000; margin: 0pt auto;”>
<div style=”width: 460px; padding: 10px;”>

<div style=”width: 480px; margin: 2px auto 2px;”>
<div style=”width: 373px; height: 100px; float: left; border: 1px solid #000000;”>
<div style=”width: 453px; padding: 10px;”>

<strong>MAIN CONTENT AREA</strong>
<div style=”background: #FFFF99; width: 100px; height: 100px; float: right; border: 1px solid #000000;”>
<div style=”width: 80px; padding: 10px;”>
<div style=”clear: both;”>
<div style=”background: #000066; width: 480px; height: 25px; border: 1px solid #000000; margin: 2px auto;”>
<div style=”width: 460px; padding: 10px;”>

The result:





There you have it. A relatively simple, straight foward template build 100% using CSS.

Next article I will cover bringing images into the DIV as backgrounds and adding basic content.

If you’re wanting to learn more, we strongly recommend the Web Design Mastery Course.

Web Design Mastery is a complete Internet Marketers Reference Guide. Not only will you learn how to design a professional website, but you’ll also learn in the easiest possible fashion.

It is a fantastic product that will teach you all you need to know about Web Design.

Share This:

How To Create Websites That Search Engines Love

There is no black magic or knowledge of rocket science required to building websites that are easy for search engines to navigate round and give you the best possible ranking.

Get the fundamentals right and you will be ahead of the vast majority of websites created.

Originally there was SGML (Standard General Markup Language). This was the standard to which all information was displayed on the Internet. It is still the basis to which HTML and XML adhere. The Algorithms that Search Engine Spiders use to analyze sites are designed to recognize this standard and very little has changed! It is therefore imperative that you design your WebPages with this in mind. If you use it, not only will you produce WebPages that Search engines will love but will vastly improve the chances of your site being ranked highly for your desired keywords and phrases.


OK here are the three most important tags used for formatting your text:

[H1] the Main Heading Tag, tells the SE the pages main topic

[H2] a Second Heading and slightly smaller (e.g. subheading)

[p] paragraph and the body of text and content

A typical layout of your HTML code, and therefore your text, should look like this.

[HTML] [HEAD]///////I’ll explain what need to go in this bit later on //////// [/HEAD] [BODY] [H2]Title of Your Page Starting with you Keyword Phrase[/H2] [H3]Subtitle Including Some other Keywords/Phrase[/H3] [p] Lots of useful information with the odd keyword thrown in but good useful information is what really makes a site successful, after all, Content is King – I’m now starting to waffle on. [/p][H3]Next Subtitle Including Some other Keywords/Phrase[/H3] [p] Lots ore useful information with the odd keyword thrown in but good useful information is what really makes a site successful after all Content is King – and again I seem to be waffling on. [/p] [/BODY] [/HTML]

There are other basic HTML tags that you can use of course but these three are so obvious that it makes it an absolute breeze for Search Engines to look at your web page and instantly know what your site is all about and how to rank its content. OK, there is one slight problem though. If you used these tags as they are on your pages and in particular the text on them isn’t going to look that good on the eye and certainly won’t win any design awards. This is where Custom Style Sheets come into play in a major way.


These provide the Search Engine Robots with a description for any images you have on your page. They look as follows:

[img src=”” alt=”blue beach ball ” width=”50″ height=”50″ /]

Place in good descriptive key words here without going over board i.e. no spamming the same words in every images alt tag 3 times each.


The Meta Tags and Title go in the Head section of your HTML and let Search Engines know what was important on a Webpage and so how to rank its importance. They can also tell the Search Engine what language it is written in and other files it needs to take into account. Typically it will look something like this:

[HEADER] [TITLE]Greek Holidays Idyllic and Very Cheap[/TITLE] [META name=”description” content=”Very Cheap Prices for Idyllic Greek Holidays and Vacations in Greece”] [META name=”keywords” content=”budget cheap greek holidays vacations europe Greece sunshine”] [/HEADER]

The Title Meta Tag is extremely important and is widely used by the SE’s most importantly Google. Make it between 5-10 words and put your best Keyword/Phrase at the beginning e.g. ‘Greek Holidays’.

The Description Meta Tag should be less than 150 characters in order to suit all Search Engines. Anything more than this will simply be missed out with some SE’s. The “description” is what most SE’s use to describe your site when listed in its results. Make sure it is ENTICING for potential customers. It should include at least 5 of your best keywords but DO NOT simply repeat all of them in your “description”.

The Keywords Meta Tag should be a string of keywords and 2-or-3 word phrases that people surfing the net might use to find pages like yours. It is a very common opinion amongst many experts that the “keywords” Meta Tag is used very little if at all by SE’s these days. This is very true but since some SE’s do still use them to some degree DO NOT repeat your keywords more than 3 times in either your “keywords” Meta Tag or your “description” Meta Tag. Some SE’s will consider this as ‘Keyword Spamming’ and your site could be seriously penalised.

The Robots Meta Tag is a simple instruction that goes in between the [HEAD] and [/HEAD] tags of your web page and tells any visiting Search Engine Robots whether than can index that page (INDEX, NO INDEX) or follow the links leaving that page (FOLLOW, NO FOLLOW). There are basically 4 variations of these instructions:


The simplest way of using the tags is to use example 1. above on every page of your website that you want the search engine seeing and then put example 4. above on every page that you do not wish the Search Engine to see yet alone index for the world to see.


The Robots.txt file is actually the first thing Search Engine Robots will see when they visit your site. With the use of a Robots.txt file we can tell Search Engines what areas of your site are out of bounds. There are also many other uses for the Robots.txt file but I won’t talk about it here.

Using a text editor (notepad, BBedit etc) create a new file and name it, yes you guessed it: robots.txt. Place in it the following syntax:

User-agent: * Disallow: /cgi-bin/ Disallow: /pictures/ Disallow: style.css

This syntax tells Search Engine that it may not look in to the folders “cgi-bin” or “pictures” (these could actually be any directories you name). Save the file, upload it to the root of your website i.e.: http://www.yourdomain.com/robots.txt and that’s it.

The SEO benefit to you is not so much to give you a higher ranking but to make your site more Search Engine friendly… Think Kudos!


Establishing a theme for your site and the contents’ structure can produce a dramatic increase in your sites ranking amongst Search Engines. All of the big search engines use a ‘Themed’ based algorithm in their ranking criterion. This is basically essential for them in order to return the most relevant results when a user enters certain ‘keywords/phrases’ into their search engine. Basically a Search Engine will spider every single page on your site and index it as one. It is therefore imperative to concentrate your sites content on the around the main theme and not to diversify too much.


The structure of your site, i.e. how your content is categorized and linked together, is meant to support and strengthen the overall theme of your site. Let me explain how you achieve this.

There are 4 main types of pages you need to be concerned with:

* Index * Sitemap – (a.k.a. Table of Contents) * Hallway Pages * Doorway/Content Pages

View your site as a Shopping Complex. The theme is “Shopping”. It has an entrance (Index page). At the entrance there is a map showing you the different areas, stores, and the stores contents (Sitemap). From the entrance there are 3 possible hallways you may walk down one for “Sports”, one for “Home”, and one for “Toys”. Each has its own description of what specific shops you’ll find (Hallway Pages). As you walk down the Hallways you’ll pass the doorway to each shop on which is a very detailed explanation of what is inside the store (Doorway Pages). I’ll explain these pages in closer detail.

Index Page – Most Search Engine Optimization experts agree that your websites’ initial page of entry (index.htm default.htm etc) will never be the definitive page that Search Engines will rank highly. Make sure it looks good, introduces your visitors to your site, and lets them know what they can expect to find deeper within it. E.G. If your site was about Holidays in Spain, all you want to say here is “Come to Greece for your Holidays – its great!”

Sitemap – A single page that is linked only off your Index page and links to every single page on your site. It should be laid out like a Table of Contents but with one or two keyword specific sentences for each and every link. This should be linked off your main page but DO NOT call/name the text in the link as “Sitemap”. It’s often thought that Search Engines will penalize this. Instead simple call it “Table of Contents”.

Hallway Page – This is basically the first page of each Sub Category. It should give a brief summary/paragraph of each specific topic within that Sub Category. E.G. Staying with the Spanish Holidays theme Hallway1 would deal with “Accommodation” and Hallway2 “Excursions”. A rule of thumb would be to focus these pages on keyword phrases containing 1-3 words.

Doorway Page – This is an individual page that is only concerned with a specific Topic of that Sub Category as mentioned in the Hallway Page. These pages are full of very specific topic related content. They will also be keyword/phrase rich focusing on 3-4 keyword phrases. E.G. Following the Hallway Page of Accommodation, Doorway1 could be “Hotel Rooms” and Doorway2 “Apartment Flats”. How to Link your Pages

All linking should be done vertically throughout the site. The only exception to this rule is the Sitemap (which links to every page). Doorway Pages should be linked to the Hallway Pages above them and the Hallway Pages in turn should be linked to the Index Page.


Click here for [a href=”http://www.website.com/beach-ball-photos.htm” title=”Page of Beach Ball Photos” target=”Target”] My Favourite Photos of Beach Balls[/a]

Please note the use of the Hyperlink Title tag. Its another great excuse to drop a few more keywords to describe the page you are leading the Search Engine Spider too.


Search Engine Optimisation UK


Arguably the most important factor in getting a high search engine ranking. This has basically been Google’s little baby that most of the other Search Engines have also begun to adopt. OK the concept is simple: If Search Engines can see that other sites are linking to you, then they think that you’re popular. The more other sites link to you, the more popular you look. The more popular you look, the higher ranking the SE will give you.

Not all links are equal though. If the sites linking to you are about the same topic e.g. “Holidays in Greece” then Google is going see these as highly relevant links. Further more, the bigger the site that links to you, or the greater its Page Rank, the more weight Google will give to these links and so your Search Engine Positioning will benefit greater.


Not to be confused with the traditional Site Map or Contents page, this page is designed specifically for the Search Engines and not for visitors to your site. Similar to the Robots.txt file, this file does not so much give your site higher rankings as it does make your site more easy to navigate for a Search Engine. Search Engine Sitemaps do require some basic knowledge of xml if you wish to build one by hand but do not fear, there are many tools available online to help you build automatically. If you are new to Google Sitemaps I would recommend reading their overview: www.google.com/webmasters/sitemaps/siteoverview.


If you can create a website that provides a clear understanding of the theme of its content with an easy to follow navigational system, you will have accomplished the fundamental basics of your onsite Search Engine Optimisation.

Continue reading

Share This: