Submit Your Article Forum Rules

Results 1 to 5 of 5

Thread: CSS Problem: Equal Column Heights

  1. #1

    CSS Problem: Equal Column Heights

    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!
    Jeff Severson
    Hidden Content

  2. #2
    Senior Member tomcatuk's Avatar
    Join Date
    May 2007
    Posts
    163

    Re: CSS Problem: Equal Column Heights

    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
    Hidden Content , not the famous one. I Hidden Content in my spare time.

  3. #3
    Junior Member
    Join Date
    Nov 2004
    Posts
    21

    Re: CSS Problem: Equal Column Heights

    Quote Originally Posted by JSeverson View Post
    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

  4. #4

    Re: CSS Problem: Equal Column Heights

    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!
    Jeff Severson
    Hidden Content

  5. #5
    Junior Member
    Join Date
    Sep 2004
    Posts
    17

    Re: CSS Problem: Equal Column Heights

    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.
    Big Sky Gal, Small town pricing. Love to be of help if I can. No site too small, no site to big.

Similar Threads

  1. Blog - Post head and column problem
    By ilyaskazi in forum Graphics & Design Discussion Forum
    Replies: 1
    Last Post: 07-12-2007, 03:39 AM
  2. Pubcon Update: Link Building And Dangerous Heights
    By Chris in forum Insider Reports
    Replies: 32
    Last Post: 07-03-2006, 01:24 PM
  3. CSS / Column problem
    By EmmaGale in forum Graphics & Design Discussion Forum
    Replies: 9
    Last Post: 07-25-2005, 07:14 AM
  4. Matching div heights with CSS and JavaScript
    By WPW_Feedbot in forum Graphics & Design Discussion Forum
    Replies: 0
    Last Post: 03-14-2005, 10:31 AM
  5. Left Column vs. Right Column
    By Bohak in forum Graphics & Design Discussion Forum
    Replies: 3
    Last Post: 12-01-2004, 11:07 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •