HTML / CSS Freeze Page Header

I want to freeze the title portion of the page so that it is always visible while the main list of images scrolls freely below. See an example at augmented reality geotags.
Below is my code. The "bottom" and "top" parameters seem to be the key; however, be advised that I have not yet tested this on a variety of screen configurations.

#titlepane {

float:left;

background-color: #ffffff;

width:100%;

padding:10px;

bottom:65%;

position: fixed;

box-shadow: 8px 8px 10px #999999;

z-index:2;

}


#scrollbelowtitle {

position:fixed;

float: left;

clear:left;

top: 35%;

padding: 10px;

height: 500px;

width: 100%;

overflow-y: scroll;

z-index:1;

}