I cannot seem to get my 3 column layout to equalized heights with any of the jquery plug ins I have tried, and I have tried all of them. I put an alert in the code to see is the script even works and the alert pops up but my columns are still empty. My only reason for needing equal heights is so that the borders extend the full length of the page (center column).Since the alert pops up, I assume the script page is being accessedWhy are my jquery scripts for the columns not working?

I already tried the css link that you posted and it made my div's go haywire. I figured I would try something with the least code and that looked to be jquery. This is my first experience with it, so I really don't have a clue what I'm doing, just want to fix my border height. Anyway, I uploaded two pages with two different equal column height plug-ins and one of them the alert will pop up and the other it does not. Go to this page and it should give the pop-up alert, then scroll down to the bottom and click the comments button. The comment page has a different script for the collumns and the alert does not pop-up. See if you can tell what I'm missing, I'm sure something is not sinking in or just not finding the right info. Thanks for looking. http://www.psychiclotto.org/lawofattraction.html The other pages on the site have no jquery loaded.The borders on the other pages are set heights.

Pullo
—
2012-11-14T06:38:13Z —
#4

Hi,Just a quick one before work.I currently only see one column on your page. Can you tell me the names of the columns you want to be equal (e.g. div#col1, div#col2, div#col3)

storkfmny
—
2012-11-14T07:34:30Z —
#5

The div's are left, content and right respectively, they are inside div "container". The left and right columns are almost empty in all but one page the home page. There is also a header and footer.

Pullo
—
2012-11-14T14:24:16Z —
#6

Hi,

So, I had a look at your code.There are a number of problems.

Your mark-up is invalid. For example, you have two opening <body> tags and several unclosed <div> tags.

I couldn't actually find where you are referencing any jQuery plugins. You define a "equalizeHeights " function at the top of your code, which is never called.

You close the container div, before you open the content div. This explains why the other (pure CSS) method wouldn't work.

Please be aware however, that this is not a clean solution (just try resizing the browser window). If you would prefer, I can show you how to do this in pure CSS.Just let me know.

HTH

storkfmny
—
2012-11-14T19:29:41Z —
#7

I see what you mean about re-sizing, wow. I figured that the least amount of code would be the best remedy, I'm new at this and only have this one website. You seem to be quite seasoned at this coding stuff and I trust your judgement on it. You seem to feel as though the css method is superior and I would give it a try if it will work on all of my pages. Some of them have problems, like my home page (index.html), if I don't close the header with two </div> tags, the contents of the left column occupy the header and the extra </div> tag closes the container div. I can't figure out where the problem is other than a "moon module" in the header that loads from another server.I'll give anything that works a try, I'm having problems with the above jquery on my other pages because of the problems I mentioned. If you think css is the way to go then I'm more than willing to give it a shot.I surely appreciate you putting your time into this, thank you. Take a look at my home page, you may want to re-consider if you think that other page's code was bad. thanks

storkfmny
—
2012-11-14T21:26:20Z —
#8

I see that you used external links for the jquery library and images, it seems to slow down loading. Is there a particular reason for doing it that way?

storkfmny
—
2012-11-15T05:20:30Z —
#9

Well, I got everything working and would be fine except for a horizontal scroll bar at the bottom of the left column on the home page and a verticle scroll bar on the comment page. Other than that, the jquery seems to work good so I'll try getting rid of those scoll bars and I will be satisfied. Thank you so much for your time, you have helped a great deal.

Pullo
—
2012-11-15T08:03:55Z —
#10

Hi there,

Sorry it's taken a while to get back to you.

storkfmny said:

I see that you used external links for the jquery library and images, it seems to slow down loading. Is there a particular reason for doing it that way?

With the images, this was just for my ease of experimentation (so that I could just copy and paste your css). There is no reason for you to do this.

So, regarding your site, I have put together a simple template for you to have a look at.It is much cleaner than using JavaScript to resize things once the page has loaded and should work well in all major browsers.I have used a solid border on the outer wrapper, but you could replace it with an image to have it look like the top and bottom borders.

Thanks, looks very neat. I will be trying that when I get up, it's 3:am. I found a jquery that work with dynamic content (my home page) and resizing doesn't affect it but on the comment page, the footer does not expand to the page height. It sits in the center of the page and the comments overflow out of the div. I hope this other code works well, I'm thinking you're right about the script, it messes with the other code too much. Oh well, thanks again, I have learned much today.

Pullo
—
2012-11-15T11:01:47Z —
#12

storkfmny said:

Thanks, looks very neat. I will be trying that when I get up, it's 3:am.

Your checking SitePoint at 3a.m.??Cool! You seem to be even more addicted to the Internet than me In which country are you, just out of interest?

storkfmny
—
2012-11-15T21:52:46Z —
#13

Pullo said:

In which country are you, just out of interest?

I am in California and hopefully moving very soon to the southeast U.S. (Florida), I don't care much for Cali. anymore.