Create a 3 Column Theme with Divs

March 17th, 2008.

3 column blog with divs

A three column theme using divs is fast-loading. It is also easy to create. Here’s a 3-step guide that is easier than shampoo instructions…

Step 1. Three Column Theme

Copy and paste this code into a text editor like Notepad:

body {
background: #FFFFFF;
margin: 0px auto 0px;
padding: 0px;
}

#rightContainer{
width:25%;
float:right;
background-color:blue;
}

#twoColumns{
width:75%;
}

#leftColumn{
width:35%;
background-color:yellow;
display:block;
float:left;}

#middleColumn{
width:65%;
background-color:red;
display:block;
float:right;
}

Save this as file as style.css (when saving, make sure to select “All files” from the drop down menu below “File name”).

Step 2. Three Column Theme

Copy and paste this code into a text editor like Notepad:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Untitled Document</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

<div id=”rightContainer”>RIGHT</div>

<div id=”twoColumns”>
<div id=”leftColumn”>LEFT COLUMN</div>
<div id=”middleColumn”>MIDDLE COLUMN</div>
</div>
</div>

</body>
</html>

Save this as file as index.html

Step 3. Three Column Theme

Open the index.html in a browser. It should look like this…

Go ahead and test it. Write some text into your Xhtml sheet…

Upload this to your main directory. If you are not sure what this is, have a peak at the Web Dictionary.

This is a very simplified blog layout. Here are some variations:

- Include a header and footer

- Include a horizontal navigation bar

- Change the background color or image

Do you have any other variations that you can create?

In future posts, I will look at basic CSS and Xhtml for little niceties like: centered text, bold text, etc.

Also, if you are using Wordpress, we’ll look at how to change your template to accommodate for the ‘loop’.

Ciao, Lilly

P.S. please feel free to contact me with questions? I love earning happy mascot points by helping you.

This article is written by: Lilly Mouse...I love communicating (through writing, art, dance, and any other way imaginable). Blogging and I have become very good friends in the last few years. LillyMouse.com is my creation, and I'm so please to share it with you! Ciao for now, Lilly Read more from this author

What's Next?

Stumble this

Digg this

Subscribe to Lilly Mouse

Your Comments

5 response so far...

SS

Very helpful stuff.

March 17th, 2008 11:57 pm
mobabs

Hi, it didn’t work for me - probably because I’m Mac. Thanks anyway.

March 19th, 2008 6:19 pm
admin

Mmm, Mobabs, I don’t think having a mac would affect you. It’s really important to use a text editor, and not something like Word which willynilly adds all sorts of other code? Love, Lilly

March 19th, 2008 11:21 pm
ravi

hey thanks for nice tip

March 22nd, 2008 8:06 pm
Rory

I’m loving it. The content and the new terms are fabulous

September 20th, 2008 6:08 pm