Glossy Accordion Menu and Cleared Floats Problem

[newspapertragedy]

1) Script Title: I'm using the Glossy Accordion Menu script.

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm

3) Describe problem: The script works fine, and as far as I can recall at the moment, I believe I've only made small cosmetic changes to it. Here's my problem:

The div containing the menu is floated left, and then to the right of that div, I have my main content div. Within the main content div, I also have some floated elements (image and video boxes with captions and whatnot) and text and headers, etc. that wrap around the floated content, either to the left or the right, depending on how it is floated. At the bottom of the main content div, there is a row of sub-navigation (next page/previous page, etc.) which is set to clear floats on either side, as I want it to stay on its own line underneath all the other content.

Unfortunately, because the clear property is set for the div containing the sub-navigation (and the Accordion Menu div is floated), it is also affected by the Accordion Menu—when the menu expands, it forces the sub-navigation div further down the page, past the bottom of the menu.

I did realize that by nesting a second div inside the main content div, and giving the nested div the property position: fixed the problem with cleared floats seems to have resolved—however, there is a footer that goes across the bottom of the page (beneath the menu and the main content), and when the menu is shorter than the main content, the main content overlaps the footer.

Any ideas would be appreciated!

[ddadmin]

Hmm this is something that's probably best illustrated visually. If you have a link to the problem page, please post that, and mention where within the menu to look for the issue.

[newspapertragedy]

You're right, it is easier to demonstrate visually. I uploaded what should be enough content for you to see what's going on, though please understand that many of the links will be broken.

This page should be adequate for demonstrating the issue:

http://www.nmc.edu/~tgordon/storyofus/temp/hst111/1_ancient-america/more-origins.html

The page uses a fluid (percentage-width) layout, so the scaling of the content will change depending on your resolution (though it will be easier to see if you use a high resolution, via scrolling, you should still be able to get the idea of what is going on). When you expand any of the menu items on the left, you should notice that the sub-navigation at the bottom of the page (as well as the footer below it) is being pushed down because of the clear:both setting, which is needed for some of the floated content on other pages.