If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Glossy Accordion Menu and Cleared Floats Problem

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.

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.