CSS Problem: Equal Column Heights

[JSeverson]

Hi,
I'm having an issue with creating equal column heights. I'm using a CSS technique that I've used in the past but, for some reason, I can't get it to work in this instance. Once the text exceeds a certain height, the right column just stops.

Could someone take a look? I've tried to cut out all code not related to this 2 column issue: click here

Also, this is the site that I've referenced in the past when building equal height columns: click here

Thanks!

[tomcatuk]

The problem is here:

#columns div.column {
float: left;
margin-bottom: -1000px;
padding-bottom: 1000px;
}

That's how far down the right element is stretching (1000px). I'm trying to work out how you'd do this right, although now you know what the cause is you may be quicker than me

[StevenRB]

Also, this is the site that I've referenced in the past when building equal height columns:

That particular technique requires that the 'bogus' padding in the container is always greater than your max content depth. I think you have simply exceeded what is in your style sheet:

engage_inside2.css:

#columns div.column {
float: left;
margin-bottom: -1000px;
padding-bottom: 1000px;
}

Try -2000 and 2000 (with this this page)

Regards,
Steve

[JSeverson]

Hi all,
Thanks for your replies. I actually found the solution about 20 minutes ago and am just in the process of testing it. Both replies are right on. I found that you can increase the bottom padding up to 32767 and lower the bottom margin down to -32767. That, from what I read, is the maximum for both for all browsers. From what I can tell, making these changes seems to have resolved the issue.

Thanks again for your replies!

[1centwiz]

Why not just use 100% and put in a wrapper div with a clear div at the bottom? This should make either of the columns, which ever is longer force the other to follow it down. It worked for me on this site: lakeside-resort-motels.com where the lft and rt columns are a repeating image.