DIV Tags: Styling and Finishing the 2 Column Template

In my last article titled DIV Tags: 2 Column Template Tutorial I covered the basic steps needed to create a simple 2 column website template frame. Today I want to take that one step further and add a few extra stylings to the code.

In particular, we’re going to add an image background to the header and footer, add a border to the container, hide the borders on the main content and sidebar areas and introduce Heading tags and simple UL and LI tags.

The main DIV styles that will be used are:

  • Border
  • Background
  • list-style
  • text-align

And also introducing these basic HTML/CSS tags:

  • H1
  • H2
  • P
Please note: that while this article does show specific CSS styling, you can and should be encouraged to attempt new things and try different styles.

We will begin with the same basic code that we ended with in the last article. Let’s get started.

Step 1: The Header & Footer Background

When adding a background image to a div, you use the same background styling we used to add the blue background. What we now want to do is modify that background code to include the new image details. You will need to have already created an image to use for the header prior to doing this. You need to add the image section in the main header DIV, not the inner padding div we added later. I am also going to change the padding on all the inner padding DIVs to 5px instead of 10px, and adjust the width as necessary.

Note: The easiest way to work out the widths of padding is to remember that this formula: Width + Padding = full width of DIV. So in the case of the header which is 480px wide, if we have 5px padding on each side, then the width would need to be 470px (5 + 470 + 5 = 480).

The change to the code is highlighted in red.

<div style=”background: #000066 url(http://www.succeed2k.com/images/divheaderbg.jpg); width: 480px; height: 80px; border: 0px solid #000000; margin: 0pt auto;”>
<div style=”width: 470px; padding: 5px;”>
<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: 363px; padding: 5px;”>
<strong>MAIN CONTENT AREA</strong>
</div>
</div>
<div style=”background: #FFFF99; width: 100px; height: 100px; float: right; border: 1px solid #000000;”>
<div style=”width: 90px; padding: 5px;”>
<strong>SIDEBAR</strong>
</div>
</div>
<div style=”clear: both;”>
</div>
</div>
<div style=”background: #000066 url(http://www.succeed2k.com/images/divfooterbg.jpg); width: 480px; height: 30px; border: 0px solid #000000; margin: 2px auto;”>
<div style=”width: 470px; padding: 5px;”>
<strong>FOOTER</strong>
</div>
</div>

Note: When using an image as the background, it is recommended that you use a path relative to your current page. ie. “url(/images/image.jpg). I used the full domain URL in this example for display purposes only.

You will notice I also changed the height of the Header and Footer DIVs to match the images I used for each. I also removed the border, as it was no longer needed as the images I used include their own border. You can simply just delete the border style altogether instead of changing it to 0 like I did.

The result:

HEADER

MAIN CONTENT AREA

SIDEBAR

FOOTER

Step 2: Container, Content and Sidebar Borders

The next step is to change the borders of the container, main content and sidebar. We want to remove the current border on the main content, change the sidebar so only the left border shows and add a new border to the container, that we had previously hidden. While at it, we’re also going to change the background color of the sidebar to match that of the new footer image.

<div style=”background: #000066 url(http://www.succeed2k.com/images/divheaderbg.jpg); width: 480px; height: 80px; border: 0px solid #000000; margin: 0pt auto;”>
<div style=”width: 470px; padding: 5px;”>
<strong>HEADER</strong>
</div>
</div>
<div style=”width: 480px; margin: 2px auto 2px; border: 1px dashed #000000;“>
<div style=”width: 373px; height: 100px; float: left;”>
<div style=”width: 463px; padding: 5px;”>
<strong>MAIN CONTENT AREA</strong>
</div>
</div>
<div style=”background: #FFFFCC; width: 100px; height: 100px; float: right; border-left: 1px dashed #000000;“>
<div style=”width: 90px; padding: 5px;”>
<strong>SIDEBAR</strong>
</div>
</div>
<div style=”clear: both;”>
</div>
</div>
<div style=”background: #000066 url(http://www.succeed2k.com/images/divfooterbg.jpg); width: 480px; height: 30px; border: 0px solid #000000; margin: 2px auto;”>
<div style=”width: 470px; padding: 5px;”>
<strong>FOOTER</strong>
</div>
</div>

The result:

HEADER

MAIN CONTENT AREA

SIDEBAR

FOOTER

Step 3: Adding Sidebar Bullets, Formatting & Adding Content

The last thing we need to do is add content to the different DIVs. We are going to use the H1 tag in the header, as H Tags (header Tags) show search engines that the phrase within this tag is a headline. Then, we need to use the H2 tag in the main content and sidebar as headings, add bullets to the sidebar formatting to look square rather than round and lastly, change the footer text so that it is smaller (H4) and centered within that DIV. We also need to remove the HEIGHT styling from the main content and sidebar DIVs as the current height restrictions will not work once content scrolls further than the height restriction.

In the code below I have used 4 different colors to explain the 4 different areas:

  • Header: Red
  • Main Content: Blue
  • Sidebar: Green
  • Footer: Pale Blue

<div style=”background: #000066 url(http://www.succeed2k.com/images/divheaderbg.jpg); width: 480px; height: 80px; border: 0px solid #000000; margin: 0pt auto;”>
<div style=”width: 470px; padding: 5px;”>
<h1>PPM Site</h1>
</div>
</div>
<div style=”width: 480px; margin: 2px auto 2px; border: 1px dashed #000000;”>
<div style=”width: 373px; float: left;”>
<div style=”width: 363px; padding: 5px;”>
<h2>Welcome To My Web Site</h2>
<p>This is a paragraph of text</p>
<p>Paragraph #2</p>
<p>Etc</p>

</div>
</div>
<div style=”background: #FFFFCC; width: 100px; float: right; border-left: 1px dashed #000000;”>
<div style=”width: 90px; padding: 5px;”>
<h2>Menu</h2>
<ul style=”list-style:square outside; margin-left:0; padding-left:1em;”>
<li>Bullet #1</li>
<li>Bullet #2</li>
<li>Bullet #3</li>
<li>Bullet #4</li>
<li>Bullet #5</li>
<li>Bullet #6</li>
</ul>

</div>
</div>
<div style=”clear: both;”>
</div>
</div>
<div style=”background: #000066 url(http://www.succeed2k.com/images/divfooterbg.jpg); width: 480px; height: 30px; border: 0px solid #000000; margin: 2px auto;”>
<div style=”width: 470px; padding: 5px; text-align: center;“>
&copy; 2010 succeed2k.com
</div>
</div>

The end result:

PPM Site

Welcome To My Web Site

This is a paragraph of text

Paragraph #2

Etc

Menu

  • Bullet #1
  • Bullet #2
  • Bullet #3
  • Bullet #4
  • Bullet #5
  • Bullet #6

© 2010 succeed2k.com

That’s it, you’re very own CSS website built around a series of styled DIV Tags.

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:

Comments

comments