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:

DIV Tags: Basic Styling and Usage

Over the years there have been many forms of Web Design that have since become “old school”, irrelevant or simply out-dated. Often, they are replaced with far better methods that provide faster loading, better SEO and improved styling, such as the replacement of <b> with <strong> and <i> with <em>.

Another such feature are Tables <table>. While still heavily used by some people, they are slowly being used less and less across the Internet, and are being replaced by the Division or DIV tag <div>. Simply put, DIV allows you specify divisions within your document, much like a table would do with rows, columns and cells.

I’ve found the most common reason people don’t use DIVs is because they don’t understand how. I hope to shed a little light on DIVs in this article and show you how to add them to your site, style them as necessary and make them look great.

Basic Usage

As with every tag in HTML, DIV tags have both an open and close tags that wrap around the specific content.

<div>Content inside the DIV tag</div>

Any content you add within your DIV tags will be controlled by any styling you specify in your DIV (see below).

Styling a DIV can be done 3 ways:

  1. Use of an external CSS file
  2. Adding CSS styling to the header of the webpage
  3. Adding CSS styling directly to the DIV

In this example we are going to focus only on #3; adding CSS directly to the DIV tag.

There are many styling options you can use with tags. In the following examples we are going to focus only on a few of them, which include: width, border, background, padding, float and margin.

Styling

To style a DIV tag, you need to add the styling commands to the opening DIV tag. This is done as follows:

<div style=” “>
</div>

The style commands go within the ” ” section. If you wanted your DIV to be 75% wide, with a black border you would use something like this:

<div style=”width: 75%; border: 1px solid #000000;”>
DIV Content
</div>

Notice that after each style command you need a semicolon “;” and the styling is wrapped within the ” “. Your width can be fixed (ie. 500px) or fluid (ie. 50%). This DIV would look like this:

DIV Content

As you can see, this looks very basic. Now we’re going to add some padding between the text and the border, make the background of the DIV grey and center the entire DIV on the screen.

<div style=”width: 75%; border: 1px solid #000000; padding: 10px; background: #cccccc; margin: 0 auto;”>
DIV Content
You can add any HTML / PHP as required within here
</div>

By adding this extra styling we now have a DIV that looks like this:

DIV Content
You can add any HTML / PHP as required within here

It’s important to know that in order to center the DIV, you need to use the “margin: 0 auto” tag. This tells the DIV that the top and bottom margins are 0 and the left and right are auto, which in industry-standard browsers will cause the DIV to be centered on the screen. In Internet Explorer, this margin style may not work however. This is due to Microsoft not following industry standard styling with the Internet Explorer browser. I believe if you want a browser that displays pages correctly, you should be using Firefox, Chrome, Safari and Opera.

You can also add DIVs inside DIVs. What we’re going to do now is add a new box inside the current one that is aligned to the right. This will have a white background and a dashed border. To do this, we need to add a second section of DIV tags, styled to our needs. We will remove the margin tag from the new DIV and replace it with “float: right;” which will align the DIV to the right side of the current DIV.

<div style=”width: 75%; border: 1px solid #000000; padding: 10px; background: #cccccc; margin: 0 auto;”>
<div style=”width: 25%; border: 1px dashed #000000; padding: 5px; background: #ffffff; float: right;”>
Floating Right DIV
</div>
DIV Content
You can add any HTML / PHP as required within here</div>

This would result in this:

Floating Right DIV

DIV Content
You can add any HTML / PHP as required within here

There you have it, basic DIV styling using CSS.

Tomorrow I will post part 2 of this series which covers how to build a website template using the methods mentioned here.

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: