Build A Three Column Site layout

This week, I decided to show you how to create a three column design with a full width header and footer. This is a fairly standard design layout and should really help with productivity.

To begin, we need to denote certain global CSS design coding. So first we need to create the body tag. We want the color of the body to be a nice repeating background, with a black under coloring.

body {background:url(/tutBG.jpg) color: #000000; repeat-x; }

Then we set up our container for our complete site.

.container {margin: 5px auto; width:1000px; background:#333333}

Next we set our header and h1 tagging.

.header { width:1000px; height: 150px; background:#000000 url(/header.jpg) repeat-x;}

.header h1 {font-size:30px; color:#990000; margin:10px 20px;}

Then we make our content container. This will house all the content of our site, minus the header and footer.

.content {margin:10px,0; width:1000px;}

Now that we have our content container, we can build our columns. Since the left column is used for navigation, it will be the smallest.

.left {background:#FFFFFF; width:160px; margin:0 5px 0 0; float:left;}

Next is our article or ‘meat’ column. This will be the largest column since it is the main focus of the site.

.center {background:#FFFFFF; width:484px; margin:0 5px; float:left;}

Finally, we build the right column. This is the second largest and holds larger ads and secondary information on our site like recent articles and affiliates.

.right {background:#FFFFFF; width:336px; margin: 0 0 0 5px; float:left;}

Now we need to build our post container that sits inside our center column.

.post { width:474px; padding:5px;}

With that built, we then need to design how our article titles, date information, and paragraphs look.

.post h2 {font-size:22px; color:#990000;margin:0;}

.date {font-size:9px; color:#666666;}

.post p {font-size:12px; font-family:Arial, Helvetica, sans-serif; text-align:justify}

Lastly we build the footer container.

.footer {width:1000px; height: 35px; margin:5px 0; background:#000000 url(/footer.jpg) repeat-x;}

Once we have all that we can build our HTML that will use our CSS.

<div class="container">

Here is our header and header title. Notice how is is separate from the rest of the content.

<div class="header">

<h1>3 Column Awesome</h1>

</div>

Then we build the content div and our columns.

<div class="content">

<div class="left"><center><script language=JavaScript src="http://aj.600z.com/aj/71638/0/vj?z=1&dim=145"></script></center></div>

<div class="center">

Then we build the post and design elements in the post div.

<div class="post">

<h2>Fixing Firebug To Edit CSS Within Firefox</h2>

<div class="date">October 2nd, 2009 ~ Dustin Brewer</div>

<p>I use Firebug constantly to easily edit a website’s CSS so I can fine tune a design or make adjustments, so when it stopped working, so did I. Every time I would try to live-edit a site’s CSS it would give me “Failed to load source for: <whatever css=”" file=”">“. I tweeted about it a bit and got a few suggestions, but none of them fixed my problem. So, I decided I would Google it and through extensive searching and endless reading the best suggestion I could find was to uninstall Firefox, delete my preferences and basically start over. Which sounded like a horrible idea, so I made do with Firebug not working for awhile.</p>

</div>

</div>

<div class="right"><center><script language=JavaScript src="http://aj.600z.com/aj/71636/0/vj?z=1&dim=122"></script></center></div>

</div>

Finally we build the footer. We need to add a “Clear:Both” div so our footer displays properly.

<div style="clear:both"></div>

<div class="footer"></div>

</div>

</body>

With all that built and together, let’s see how it all comes together. This is the basic set up and should give you a clear starting point to make a more dynamic website.

Leave a comment