How to make images and logo at top stay there even on scroll

[Eternal_Howl]

Okay, I think I've exhausted my resources and that's when I come grovelling for help. I'm not sure if this is an image issue or an issue with floats etc.

To try and explain what I am wanting to achieve:

Left image
top left always viewable

Logo
centre image
line break for navigation bar
top centre always viewable

Right image
Top right, always viewable


Sounds simple and a css frame would do it right? Not quite. While that does work, my left and right image are slightly bigger in height and therefore I end up with a bigger css frame at the top of the page. I did try using the css frame from this site (can't remember the name of it) but it doesn't give me the desired effect.

So I grabbed my three column layout from another site I have and tried playing around with that. All I wind up with (viewing in both firefox 3 and ie 8 - yes 8 and I prefer 7) is the logo in the middle staying fixed (where I want it and the nav bar (chrome bar from this site) extends all the way to the left when scrolling the content up as the left and right images also scroll. It's probably easier to give you the css and links to both my test examples as this is kind of hard to explain. But I want the left and right images to act as a kind of frame (but not html/iframe) around the content.

So the latest attempt using 3 cols
Page can be viewed here . I've left a line border around the content I want to move while the rest of the top I want to remain in place : http://www.ravenouspathogen.com/framed.html
The css for the above page

/* CSS Document */
* {margin:0;padding:0}
/* commented backslash hack v2 \*/ 
html, body{height:100%;} 
/* end hack */ 
p {margin:0 0 1em 0;padding:0px}

body {
	background:#000000 url(black.gif) repeat;
	color: #000;
	position:relative;/* for ie7*/
	
}
#outer{
	min-height:100%;
	margin:0 188px;
	background:#000000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	color: #ffffff;
	}

* html #outer{height:100%;} /*IE treats height as min-height anyway*/
#header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:180px;
	background:#000000;
	overflow:hidden;
	color: #fff;
	 
}
#header a{color:#fff;}
#left {
	position:relative;
/*ie needs this to show float */
	width:188px;
	float:left;
	margin-left:-187px;/*must be 1px less than width otherwise won't push footer down in some browsers */
	top:0;
	left:0;
	color:#fff;
	left:-1px;
	padding-bottom:52px;/* clear footer*/
	background: #000000;
}

#right {
	position:relative;
/*ie needs this to show float */
	width:188px;
	float:right;
	margin-right:-187px;/*must be 1px less than width otherwise won't push footer down in some browsers */
	padding-top:0px;/* to clear header*/
	color:#fff;
	background: #000000;
	padding-bottom:52px;/* clear footer*/
	left:0px;
	right:5px;
}
 
#footer {
	width:100%;
	clear:both;
	height:50px;
	background: #000000;
	color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-align:center;
	position:relative;
	margin-top:-50px;/*drag footer from below the fold*/
}
#centrecontent {
	float:right;
	width:100%;
	position:relative;
	padding-bottom:52px;/* clear footer*/
 margin-left:-1px;
 
  
}
#main {
font-family: Garamond, Georgia, Palatino Linotype, Verdana;
width: 99%;
border: 1px solid #666;
background-color: #000000;
padding-top: 181px;


}
.outerwrap {
	float: left;	
	width: 100%;
	padding-top:0px;/* to clear header*/
	margin-right:-3px;/* to stop columns dropping*/
}

.clearer{
	height:1px;
	overflow:hidden;
	margin-top:-1px;
	clear:both;
}


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#chromemenu{
width: 100%;
font-weight: bold;
font-size: 90%;
}

#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

#chromemenu ul{
border: 1px solid #BBB;
width: 98%;
background: url(/chromebg1.gif) center center repeat-x;
padding: 5px 0;
margin: 0;
text-align: center; /*set value to "right" for example to align menu to the left of page*/
}

#chromemenu ul li{
display: inline;
}

#chromemenu ul li a{
color: #000000;
padding: 5px;
margin: 0;
text-decoration: none;
}

#chromemenu ul li a:hover{
background: url(/chromebg.gif) center center repeat-x;
}

The previous attempt that did not give me the desired results is here
http://www.ravenouspathogen.com/test.html If you look at them both side by side - or compare them and it renders properly in your browser, you'll see the height of the frame in this page takes up too much window space.

The css for the 'test.html' is as follows:

body{
margin: 0;
padding: 0;
border: 0;
overflow: auto;
height: 100%; 
max-height: 100%; 
color: #FFFFFF;
background-color: #000000;

scrollbar-face-color:#000000;
scrollbar-base-color:#000000;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#000000;
scrollbar-shadow-color:#FFFFFF;
scrollbar-highlight-color:#EBF5FF;
scrollbar-3dlight-color:#78AAFF;
scrollbar-darkshadow-Color:#78AAFF;
}

 A  	    { color: #339999; font-weight: bold; text-decoration: none }
  A:link    { color: #339999; font-weight: bold; text-decoration: none }
  A:active  { color: #ffffff; font-weight: bold; text-decoration: none }
  A:visited { color: #339999; font-weight: bold; text-decoration: none }
  A:hover   { color: #339999;  font-weight: bold; text-decoration: underline}



#framecontent{
position: absolute; 
top: 0; 
left: 50; 
width: 100%; 
height: 277px; /*Height of frame div*/
overflow: disable; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #000000;
color: #000000;
}


#maincontent{
position: fixed; 
top: 277px; /*Set top value to HeightOfFrameDiv*/
left: 0px;
right: 0;
bottom: 0;
overflow: auto; 
background: #000000;
width: 100%;
}

#footer {
font-size:70%;
line-height:9pt;
font-family:verdana;
font-weight:normal;
background-color:#000000;
color: #FFFFFF;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 264px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}



/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#chromemenu{
width: 100%;
font-weight: bold;
font-size: 90%;
}

#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

#chromemenu ul{
border: 1px solid #BBB;
width: 70%;
background: url(/chromebg1.gif) center center repeat-x;
padding: 5px 0;
margin: 0;
text-align: center; /*set value to "right" for example to align menu to the left of page*/
}

#chromemenu ul li{
display: inline;
}

#chromemenu ul li a{
color: #000000;
padding: 5px;
margin: 0;
text-decoration: none;
}

#chromemenu ul li a:hover{
background: url(/chromebg.gif) center center repeat-x;
}

I'm sure with all my mucking around it's all looking a bit messy - but humour me please And if I haven't clarified what I'm trying to achieve well enough, please advise. It's late and I've been scouring webpages and trying out different ways for ages. I've been advised to stay away from position: absolute as much as poss as IE apparently doesn't take much notice of it.

Oh, and in case someone suggests a javascript fix, unless this is the ONLY way to achieve what I want, I would like to stay clear of this as much as possible. I'd like to be able to do it in CSS - there MUST be a way. Unless what I am wanting to do is too complicated to be cross-browser compatible? Surely not?

[Eternal_Howl]

I think this might be in the too hard basket.