Capa se mueve al redimensionar navegador

[xuturk]

Hola a todos.

Ante todo no quiero que penseis por el titulo que es el tipico problema de no poner tamaño fijo a los elementos, por que ya buscando he visto esa solucion y no me ha funcionado, asi que voy a explicaros mi situacion:

Tengo una barra de menu arriba de la pagina (como la de este foro en negro) de la siguiente manera:

Código:

<aside id="headerdr">

 <div id="divasidemenu">
  		<img src="http://www.forosdelweb.com/f53/Plataforma/resources/images/barraPlat/drlogoweb.png" alt="Dark Respawn" class="itemseleccionable" id="imglogo" />
  	</div>
 	
 	<div id="divasideacc">
  		<ul id="lstdrhead">
 			<li class="itemseleccionable" id="iniciarsesion">Iniciar Sesion</li>
 			<li class="itemseleccionable" id="itemidioma">Idioma</li>
 		</ul>
	</div>  

</aside>

A diferencia de esta pagina, quiero que sea una barra fija, que al bajar el scroll siga bajando, por lo que la he puesto Fixed.

Todo bien, el unico problema, es que la capa divasideacc se me mueve e incluso se sale de la capa headerdr al redimensionar el navegador.

No veo manera de hacer que la barra ocupe todo el ancho que no sea mediante width:100% (que puede ser lo que de el problema ya que puse 1000px y funciono bien, pero no puedo saber exactamente la resolucion con la que entran salvo que use javascript (o salvo que me enseñeis a hacerlo)

Y a las dos capas (que la divasidemenu funciona perfectamente) las he puesto un tamaño fijo.

Os dejo el CSS.

Código:

#headerdr
{
	width:100%;
	height:30px;
	line-height:30px;
	background-color:black;
	margin: 0;
	color:white;
	position:fixed;
}

#divasidemenu
{
	height:30px;
	width:600px;
	float:left;
	background-color:green;
}

#divasideacc
{
	height:30px;
	width:300px;
	background-color:yellow;
	float:left;
}


#lstdrhead
{
	margin:0;
	padding:0;
	list-style:none;
	height:30px;
}

#lstdrhead li
{
	margin: 0;
	float:left;
	padding-right:10px;
	padding-left:10px;
}

A ver si podeis ayudarme.

Muchas gracias.