Problems with CSS in new template (SOLVED)

I’ve been editing a MODx template for a client, and I’ve found a flaw in their original template which has become a major break in my new edited version:

Both the navigation on the left (div id="left") and the main content panel (div id="main") are contained within a wrapper (div="wrapper"), which has a background image assigned to it. Immediately following the "wrapper" div is the "footer" div, which has another bg image. However, for some reason, the "wrapper" div seems to effectively end after the "main" div, even if the "left" div is longer. This causes a problem, because, as you’ll see if you check out the page, the footer (and, of course, the corresponding bg image) will overlap the left column if it is longer than the main column.

Here is the best example on the current, live site (with the old template):
http://marshallengines.com/crankshaft-kits.htm

The problem is more obvious here, the same page on the testing site (with the newer version of the template):
http://marshall.infusecreativegroup.com/crankshaft-kits.htm

I don’t know for sure, but I suspect this has something to do with the css ’float’ property. I’ve poked around all over in the css and the template index file, but I haven’t been able to find the source of the problem or any solution.

Any assistance would be much appreciated. Thanks in advance!

Try either making the footer itself "clear:both;", or add an extra element at the very bottom of the wrapper div, and have it do the clear:both.

The ’clear’ property seemed like a brilliantly simple idea (which is what usually gets me...);

However, I tried the ’clear’ property to no avail.


Is it possible this could be something to do with the ’display’ property? When the footer was set to ’display: block,’ the footer was in front of the left navigation. I took out the ’display: block’ property from the footer. Now, the footer text is in front and the footer bg is behind, but it is still only in line with the ’main’ div. It’s almost like there is something in the css that is making the ’left’ div act as though it is not within the ’wrapper’ div. But it IS within on the code, for sure.

If anyone who has the Firefox developer toolbar or some other easy way of checking the css could do so for me, I’d much appreciate.

Thanks!

It was something simple alright...


The "left" div had the height property set to 450px. Even though the content of the left div spilled past that 450px, the divs that followed placed themselves where they should have been if the left column actually had been 450px.