homepage Welcome to WebmasterWorld Guest from 54.224.202.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

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




msg:3947948
 9:41 pm on Jul 7, 2009 (gmt 0)

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




msg:3948432
 2:10 pm on Jul 8, 2009 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved