posicionamiento fijo dentro de capa relativa

[OrgasmUs]

tengo esto (mejor dicho, necesito tener esto):



y quisiera que esa imagen que esta dentro de la capa sidebar (que esta flotando) se mantuviera fija respecto a su capa contenedora, pero cuando se redimensiona la ventana, obtengo esto:



la imagen se queda fija (toma sus puntos de referencia totales), no se si me explico...

el codigo HTML es:

Código:

<div id="page-container">
	<div id="header-top">
	</div>
	<div id="bloquecentral">
		<div id="sidebar-a">
				<div id="logo">
					<img src="Images/logo.jpg">
				</div>
                                <div class="sinmargen">
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	  </div>
  	</div>
		
	<div id="navigation">
		  <dl class="hidden">
			  <dt id="about"><a href="#">About</a></dt>
			  <dt id="services"><a href="#">Services</a></dt>
			  <dt id="portfolio"><a href="#">Portfolio</a></dt>
			  <dt id="contact"><a href="#">Con</a></dt>
		  </dl>
	</div>
	<div id="content">
		<div class="padding">
			<h2>¿QUIÉNES SOMOS?</h2>
                </div>
	</div>
  </div>
  <div id="pie"></div>
  <div id="footer">
		<div id="altnav">
			<a href="#">Empresa</a> - 
			<a href="#">Delegaciones</a> - 
			<a href="#">Productos</a> - 
			<a href="#">Qué es el Potón</a> - 
			<a href="#">Contacte</a>
		</div>
		<div id="credits">
		</div>
  </div>

</div>

y su CSS es:

Código:

/* CSS Document */
html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
        background: #317893;
	background-image: url(../images/fondoazul.jpg); background-repeat: repeat-x;
}
.hidden {
	display: none;
}

h1 {
	margin: 0;
	padding: 0;
}

/*CONTAINERS*/

#page-container {
	width: 1024px;
	margin: auto;
}

#header-top {
	height: 51px;
	background: #317893
	            url(../images/header-top.jpg);
}

#logo {
        position: absolute;
        left: 186px;
        top: 51px;
}

#bloquecentral {
        background: #317893
	            url(../images/fondo_central.jpg);
}

#navigation {
	height: 62px;
	margin-left: 361px;
	background: #db6d16
	            url(../images/nav-bar.jpg);
}

#sidebar-a {
	float: left;
	margin-left: 0px;
	width: 361px;
	line-height: 18px;
	background: #317893
	            url(../images/fondo-sidebar.jpg); background-repeat: repeat-y;
}

#sidebar-a .sinmargen {
	margin: 0;
	padding: 0;
}

#footer {
	height: 66px;
	clear: both;
	font-family: Tahoma, Arial, Helvetica, Sans-serif;
	font-size: 10px;
	color: #46A4C8;
	padding: 13px 25px;
	line-height: 18px;
}

#footer #altnav {
	width: 350px;
	float: right;
	text-align: right;
	margin-right: 45px;
}

#footer #credits {
	width: 350px;
	float: left;
	text-align: left;
	margin-left: 70px;
}

#footer a {
	color: #46A4C8;
	text-decoration: none;
}

#footer a:hover {
	color: #ffffff;
}

#pie {
	height: 261px;
	clear: both;
	background: #317893
	            url(../images/fondopie.jpg);
}

#content {
	background: #ffffff
	            url(../images/fondo_contenido.jpg);
	margin-left: 361px;
}

#content .padding {
	padding: 35px;
	padding-right: 25px;
}

#content h2 {
	font-family: Times New Roman, Times, serif;
	font-weight: bold;
	font-size: 12px;
	color: #2E6F86;
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	padding-right: 100px;
}

#content p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	padding-right: 100px;	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #9B7E31;
}

#content .creditos {
	font-family: Arial, Helvetica, sans-serif;
	font-size: xx-small;
	color: #72B6CF;
}

A ver si alguien me ilumina, porque he intentado lo de poner esa capa dentro de otra que sea relativa (como en: http://www.stopdesign.com/articles/absolute/, y no funciona...