Please help move form selection fields/absolute position when scrolled.

Hello everyone, I just stumbled across this forum and thought maybe someone here could help me with a few coding alterations.

I would like to position the rss feed selection fields on this feed output so I can scroll the feed with the selection fields remaining stationary.

<link rel="icon" type="image/png" href="rss_include/feed-icon-red.png">
<style language='text/css'>
@import url('rss_include/style.css');
</style>

<script language="javascript">
var XMLHttpRequestObject = false;
var img = new Image();
img.src = "rss_include/loading.gif";

if ( window.XMLHttpRequest )
XMLHttpRequestObject = new XMLHttpRequest();
else if (window.ActiveXObject)
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");

function changeOptions()
{
LoadFeed();
}

function LoadFeed(value, initial)
{
if ( XMLHttpRequestObject )
{
var dsource = "rss_include/ajax.php?loadfeed";

if (value)
dsource += "=" + value;
else
{
var val = document.getElementById("rss_feed").value;
if ( val == "" )
document.getElementById("rss_feed").selectedIndex += 1;

dsource += "=" + document.getElementById("rss_feed").value;
}

dsource += "&fulltext=" + document.getElementById("showtext").checked;
dsource += "&showimages=" + document.getElementById("showimages").checked;

XMLHttpRequestObject.open("GET",dsource);
XMLHttpRequestObject.onreadystatechange = function()
{
if ( XMLHttpRequestObject.readyState != 4 )
{
document.getElementById("rss_div").innerHTML = "<center><img class=\"loading\" src=\"" + img.src + "\"></center>";
}

if ( XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200 )
{
document.getElementById("rss_div").innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>

<?php

require_once("rss_include/config.php");

function LoadFile($xml_file)
{
$xml = null;
if ( !file_exists($xml_file) || !($xml = simplexml_load_file($xml_file)) )
{
echo '</select>';
echo "Error opening XML feeds file: $xml_file<br>";
return;
}

return $xml;
}

function ShowFeedOptions($xml_file)
{
echo '<select id="rss_feed" onChange="LoadFeed(this.value)" title="GuyWMustang.com RSS Reader">';

$xml = LoadFile($xml_file);
if ( $xml == null )
return;

$url = array();
foreach($xml->feeds->category as $category)
{
echo "<option value=\"\">" . $category['name'] . "</option>";

foreach($category->feed as $feed)
{
if ( $feed['name'] != "" )
{
// Add a spacing to the feeds
$name = "&nbsp;&nbsp;&nbsp;&nbsp;" . $feed['name'];
$url = str_replace("&", "%26", $feed['url']);
$url = str_replace("http://", "", htmlspecialchars($url));
echo "<option value=\"$url\">" . $name . "</option>";
}
}
}

echo '</select>';

$options = array();
$rss = $xml->options[0];

if ( strcasecmp($rss['fulltext'],"true") == 0 )
array_push($options, "true");
else
array_push($options, "false");

if ( strcasecmp($rss['images'],"true") == 0 )
array_push($options, "true");
else
array_push($options, "false");

return $options;
}

function SetOptions($options)
{
if ( sizeOf($options) == 2 )
{
echo "<script>document.getElementById(\"showtext\").checked = " . $options[0] . ";</script>";
echo "<script>document.getElementById(\"showimages\").checked = " . $options[1] . ";</script>";
}
}

if ( isset($_GET['links']) )
{
$xml = LoadFile($xml_file);
if ( $xml == null )
return;

// end the link editing
return;
}

?>
<div class="container" id="container_div">
<a name="top"></a>
<div class="header_div">
<div style="display:run-in;float:left;">
<font class="graytext">RSS Feed:</font>
<?php $options = ShowFeedOptions($feeds_xml); ?>

<input type="checkbox" id="showtext" onChange="changeOptions(this)" checked><font class="graytext">Show Full Article Text</font>
<input type="checkbox" id="showimages" onChange="changeOptions(this)" checked><font class="graytext">Show Images</font>
</div>

<?php SetOptions($options); ?>
</div>
<div class="rss" id="rss_div">
<script>LoadFeed(document.getElementById('rss_feed').value, true);</script>
</div>
<!-- <p style="padding:0px;margin-right:2px;margin:0px;" align="center"><a class="top" href="#top">Top</a></p> -->
</div>






<-- CSS BELOW -->




body
{
overflow: auto;
font-family: arial;
}
div.header_div
{
position: relative;
/*background-color: #EFEFEF;*/
width: 100%;
overflow: auto;
margin: auto;
}
div.container
{
/*border: 1px solid black;
background-color: #EFEFEF;*/
position: relative;
margin: auto;
display: block;
overflow: auto;
/* SPECIFY HEIGHT & WIDTH AS DESIRED */
height: 90%;
width: 80%;
}
div.rss
{
width: 99%;
margin: 2px;
background-color: tan;
position: relative;
/*border: 1px solid black;*/
}
img.loading
{
position: relative;
margin-top: 50px;
}
a.rss_link,a.rss_link:active
{
display: inline;
color: blue;
}
a.rss_link:hover
{
color: #BBBBFF;
}
a.rss_link:visited
{
color: black;
}
a.top,a.top:active {
text-decoration: none;
font-size: 10pt;
display: inline;
color: black;
}
a.top:hover {
text-decoration: underline;
color: brown;
display: inline;
}
font.graytext
{
font-size: 10pt;
color: #444444;
}
font.rss_title
{
font-size: 12pt;
font-weight: bold;
text-decoration: underline;
}
font.rss_date
{
font-size: 9pt;
font-weight: normal;
color: black;
display: block;
}
font.rss_description
{
font-size: 12pt;
color: blue;
}
select
{
color: black;
font-size: 10pt;
background-color: #EAEAEA;
}

any help would be greatly appreciated.....thanks :)

Apply css style position:fixed
Details here:
http://davidwalsh.name/css-fixed-position
and
http://www.w3schools.com/cssref/pr_class_position.asp

I should have been more clear, I am scrolling the page with a paginate script...
so I need to output the feeds on the page without scrolling the selection fields, everything on the page will scroll when the paginate script is used. :confused:

Can someone help to auto scroll this (http://techraffle.com/rss/index.php) page while keeping selection form fixed or add onmouseout scroll to this? You can view it on my forum here (http://techraffle.com/forum/index.php) and you will see what I am trying to accomplish.

Thanks