Need help! How to fix equal column height problem in DW-CS3 Template

[Dano4193]

Hi all I just joined today. I have Dreamweaver CS3 and just started building my website. I used a DW-CS3 3 column template and just noticed that the columns on the left and right do not go all the way down to the bottom of the page. It seems to be controlled by the amount of text.

I am somewhat familiar with html but not at all with CSS, I only know the advantages of how CSS works.

When I started creating my site I did not setup any CSS at all I just started created with images, text, links etc.

Is there a somewhat easy fix for getting the gray background colors on the left and right columns to go all the way down to the bottom of each page? I have talked to a couple other folks on other sites but it sounds very complicated and a little over my head.

Here is my website address so you can take a look. I appreciate any help and advice anyone can provide. I would hate to start this site all over again....thanks Dano

[snip]

[edited by: brotherhood_of_LAN at 12:33 am (utc) on July 8, 2009]
[edit reason] No URLs as per the ToS... thanks [/edit]

[PSWorx]

Well depending on the code and design layout it could just be a case or wrapping your columns in a <div></div> with an id="styleName" attribute pointing to a piece of CSS (either embedded with <style></style> tags or via an external my.css file) which tells it to repeat a background image the height of the div which would be governed by the tallest of your columns (providing no floating/absolute objects interfere):

#styleName{
width: 700px;
background-image:url('columnBg.gif');
background-repeat: repeat-y;
background-position: top left;
}
.sidePanel {
width: 100px;
}

<div id="styleName">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="sidePanel">100px</td>
<td>500px</td>
<td class="sidePanel">100px</td>
</tr>
</table>
</div>

That would work if say you have a solid colour background on the left and right and another sold colour in the middle of a three column layout, the image would only need to be 1px tall and as wide as the combined columns it would be applicable to i.e. 780px, take note of any padding that might be used in tables or elsewhere as this might cause confusion when setting widths/heights in CSS, refer to the CSS box model for info.

[w3.org...]

A snippet of the code relating to the area of the site in question would be best to provide a more specific answer.