Replace frameset using CSS

I’ve read repeatedly that it’s time to use CSS instead of framesets, but there’s a result I haven’t been able to duplicate via CSS:

My frameset page has 4 frames, namely a “header” across the top of the page, a “menu” down the left side below the header, and, in the remaining space, two frames above one another, the top one, “pages”, containing the main content of the page, and the bottom one, “pageButtons”, containing navigation tools.

“pages” uses a lot of display=”none” and display=”block” coding (via javascript) to hide current content and display new content.

The frameset can be seen at
[url]http://pokerskill.us/poetry/poetrySite.htm[/url]

The problem I’m having in converting to CSS is with the items in the pageButtons frame:

In the frameset coding, the arrows are always at the bottom of the page, even when I change the height of the window.

What I’ve done in CSS is to “float” the menu left and establish a <div id=”pagesAndButtons”> which contains the other two divs (“pages” and “pageButtons”).

I’ve tried pageButtons both with and without “position:absolute; bottom:1em;”

But here are the problems:

When the content of “pages” is short, the pageButton arrows appear well above the bottom of the screen. And then when “pages” displays content with greater height the arrows/buttons reamain where they were, so they’re in the middle of the content.

And when I increase the height of the window they don’t drop to the bottom of the viewport until I refresh.

So, how do I make the pageButtons ALWAYS be at the bottom of the viewport and always have the displayed content in “pages” remain above the pageButtons?

Is this an effect that can’t be duplicated via CSS?

Also in #CSS _↴