How to force DIV to the bottom in Firefox

Hello CSS Gurus,

I have a very complicated CSS layout and I am having trouble with Firefox and Opera. Looks great in IE (go figure!).

I have two horizontal bars of color that are 20px tall and 100% wide. They are supposed to be flush against the top of the window and the bottom of the window with the page content center in between and bumping flush against the bars of color. Got that?

So the top and bottom bars are <div>s and the page content is all wrapped in a <div>. This all works great in IE but in Firefox and Opera the bottom bar floats up the page a ways and sits behind the page content.

The short version of the HTML is

<body id="info">
<div id="topBar"></div>
<div id="pageBody">
Content….
</div>
<div id="bottomBar"></div>
</body>

The effecting CSS is

body {
margin: 0;
padding: 0;
height: 100%;
text-align: center;
color: #ccc;
font: Verdana, Arial, sans-serif;
}
#topBar {
width: 100%;
height: 20px;
margin: 0;
padding: 0;
}
#pageBody {
width: 800px;
height: 100%;
margin-right: auto;
margin-left: auto;
background-color: #000;
}
#bottomBar {
width: 100%;
height: 20px;
margin: 0;
padding: 0;
}

All of my #info CSS changes colors only.

Each page that uses this has a different height to account for different amounts of page content.

Does anyone know what’s going on here.

Thanks a bunch.

Cienwen