[SOLUCIONADO] 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.

[pzin]

¿Por qué no trabajas con porcentajes los elementos interiores? El problema es que si mezclas ambas cosas, en algún momento la cantidad de píxeles más la cantidad porcentual causará desbordamiento.

Si forzosamente necesitas usar ambas medidas, podrías usar calc() y hacer algo como:

Código CSS:

width: calc(100% - 600px);
 

No sé qué soporte tendrá calc() —estoy vago para miralo.

Una opción seguramente con mayor soporte, sería usar algunas de las técnicas de maquetación de columna fija + columna fluida. Hay soluciones a esto por doquier, cada una distinta a la otra.

[xuturk]

Muchas gracias por contestar,

Probe a poner 50% a cada una de las interiores, y la de la izquierda, perfecta, pero la de la derecha se mueve y se monta encima de la otra, esta vez no se sale de la capa, pero se queda debajo y por tanto no se ve nada bien. El calc no me gusta ya que como dices no se que soporte tendra pero no tiene muy buena pinta, ahora hecho un vistazo a ver si me sirve lo que me comentas.

Gracias.

[pzin]

Si no quedan una pegada a la otra el problema se debe al contenido del elemento que se "mueve". Siempre y cuando no exista un padding ni bordes, como lo tienes en el código.

[xuturk]

Parece que me ha funcionado utilizando un min-width en la capa madre de todas, le he puesto 900px y la suma de las hijas es 900 y va tal como queria, no se si es lo mas correcto, pero mire lo que me dijiste en un par de articulos y no consegui nada.

Muchas gracias por todo, de momento voy a intentar tirar con esto a ver si no me choco con otro problema.

Gracias!