Hello My Webpage has three main components(rather divs)
1: top div that has some icon images(inside topmenu div)
2: left div containing navigation links is scrollable
3: right or main content where the actual content appears, This is actually a single page where the content will be displayed according to what is clicked in the left div(navigation)

I want my icon images that are in the top divs to remain fixed. I tried using

position:fixed; for div contaning icon images, but it didn't work, now when I fixed the top div the contents of right div are scrolling over the top div.

Can you guys tell me what do I need to set the icon images inside top div to remain fixed. so that they are not covered up when I scroll the right page or main page.

Part of my code is below:
Code:
<div id="top">
	<p>I am in the top rectangular box</p>
	<div id="topmenu">/* I want these to remain fixed*/
		<ul>
			<li><a href="#" title="pdf">&nbsp;</a></li>
			<li><a href="mailto:test@Gmail.com" title = "email">&nbsp;</a></li>
			<li><a href="#" title="print">&nbsp;</a></li>
		</ul>
	</div>
	
</div>
Left navigation tag:

Code:
<div id="left">
	<ul>
		<li><a href="#objectives">Home</a></li>
		<li><a href="#experiences">Experience</a></li>
		<li><a href="#projects">Projects</a></li>
		<li><a href="#skills">Skills</a></li>
		<li><a href="#hobbies">Hobbies</a></li>
	</ul>
</div>
Right Frame or main content that I dont want to scroll above the icons:
Code:
<div id="right">
	
	<div id="objectives">
	<h3>Career Objectives</h3>
	<p>Obtain blah blah blah blah blah...
      </div>
	<div id="experiences">
		<h3>My Experiences</h3>
		<p>
			Develo.........
</div>
	<div id="projects">
		<h3>My Projects</h3>
		<p>
			Testing </a> in the ESP. As a mid-sized TT company,  they needed a solution to track their 
			cliejbdfjdjn  blah blah...
</div>
	<div id="skills">
		<h3>My Skills</h3>
		<p>
			Exce...blah blah

Now my css is here(A part off):
Code:
#top 
{ 
   margin-left:7px;
   	width:970px; 
	height:100px; 
	border:5px solid #000;
	position:fixed;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
  }
 #left {
 margin-top:5px;
 margin-left:7px;
 background-image:url('images/bg_mainNav_active.png');
 background-repeat:repeat-y;
 float:left;
 border:5px solid #000;
 height:100%; 
 width:180px; 
 position:absolute;
 -webkit-border-radius: 15px;
	-moz-border-radius: 15px;
 }
#right { 
background-image:url('images/bg_mainContent.png');
background-repeat:no-repeat;
margin-top:5px;
margin-left:210px;
position:absolute;
overflow:auto;
border:5px solid #000;
 height:100%; 
 width:770px; 
 -webkit-border-radius: 15px;
	-moz-border-radius: 15px;
 }
#topmenu {
	height: 22px;
	overflow: visible;
	padding: 5px 20px 0 0;
	width: 870px;
	position:fixed;
}
blah blah...
#topmenu ul li a  {
	background: url("images/icon_pdf.jpg") no-repeat top left;
	display: block;
	height: 20px;
	width: 20px;
	
}