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;”>
</div>

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>
<div style=”width: 480px; border: 1px solid #000000; margin: 2px auto;”>
</div>

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>
<div style=”width: 480px; border: 1px solid #000000; margin: 2px auto;”>
<div style=”width: 376px; height: 100px; float: left; border: 1px solid #000000;”>
</div>
<div style=”width: 100px;
height: 100px; float: right; border: 1px solid #000000;”>
</div>

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

</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>
<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>
<div style=”width: 100px; height: 100px; float: right; border: 1px solid #000000;”>
</div>
<div style=”clear: both;”>
</div>
</div>
<div style=”width: 480px; height: 25px; border: 1px solid #000000; margin: 2px auto;”>
</div>

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;”>
<strong>HEADER</strong>
</div>

</div>
<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>
</div>
<div style=”background: #FFFF99; width: 100px; height: 100px; float: right; border: 1px solid #000000;”>
<div style=”width: 80px; padding: 10px;”>
<strong>SIDEBAR</strong>
</div>
</div>
<div style=”clear: both;”>
</div>
</div>
<div style=”background: #000066; width: 480px; height: 25px; border: 1px solid #000000; margin: 2px auto;”>
<div style=”width: 460px; padding: 10px;”>
<strong>FOOTER</strong>
</div>
</div>

The result:

HEADER

MAIN CONTENT AREA

SIDEBAR

FOOTER

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: