I'm rather rusty, haven't done much lately and can't remember how to get this working.

The contents are inside a wrap width: 75%; and margin: 0px auto;

The headerbar spans across the width of the wrap with a background image.

I'm trying to get my site_logo banner (header height x 1000px) to sit on the left hand side of this header, and add Image Logo's vertically centred on the right hand side of the header. However, I'm looking for these Image Logo's to sit fixed exactly off the right side of the header and above the site_logo. So for example, the page is zoomed in using the browser, the banner flows below these Image Buttons and the overflow off the DIV is hidden.

HTML Code:
<div class="headerbar">
	<div class="site_logo">
			<a href="{U_INDEX}" title="{L_INDEX}">{SITE_LOGO}</a></div>
	<div class="image_logos>
		<a href="index.php" title="Logo" target="_blank">
			<img alt="Logo" height="60" width="120" src="{T_IMAGESET_PATH}/charitylogos/cb_logo_.png">
.headerbar {
	height: 175px;
	background-image: url("{T_THEME_PATH}/images/headerbar.gif");
	margin-bottom: 0px;
	background-repeat: repeat-x;

.site_logo {
	position: relative; top: 0; left: 0;
	width: 100%;
	display: block;
	overflow: hidden;
	z-index: 1;

.image_logos {
	position: fixed; top: 10px; right: 20px;
	display: block;
	overflow: hidden>
        z-index: 2;
Hope that makes sense. I'd very appreciated some guidance on this.