Hola amigos , me estoy quebrando la cabeza con un proyecto que tengo. Necesito saber como dejar una capa div , este funciona como menu y al hacer scroll solo se mueve el contenedor pero al achicar la ventana del navegador se despalza todo el contenedor y la div me queda fija y deberia moverse con todo. Ademas lo he probado en otras resoluciones y se descompagina todo. Aca les dejo los codigos, espero una ayuda.
codigo HTML
<body><!-- comienza contenedor-->
<div id="all">
<div id="wrapper">
<div id="side-a">
<div id="titulo">Portafolio - Open Souce Icons</div>
<div id="iconware">
<div id="bloque">
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div><br />
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div><br />
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div><br />
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
</div>
</div>
<div id="separador"></div>
<div id="iconware">
<div id="titulo">Portafolio - Freeware Icons</div>
<div id="opensource">
<div id="bloque">
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div><br />
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div><br />
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div><br />
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
<div id="prev"></div>
</div>
</div>
</div>
<div id="separador"></div>
<div id="contacto">
<div id="titulo">Contactame</div>
<p>Wake up, fatty cute awesome, bigdaddy!</p>
</div>
</div>
<div id="side-b"></div>
<div id="footer"></div>
<div id="flotante">
<div id="pic">
<img src="imagenes/picture.png" width="128" height="117" alt="Jairo " /></div>
<div id="name"><h1>Jairo Boudewyn</h1></div>
<div id="socials"><img src="imagenes/socials.png" width="144" height="20" alt="Sociabiliza!" align="right"/></div>
<div id="nav">Blog - Portafolio - Contacto</div>
</div>
</div>
</div>
<!-- fin contenedor-->
codigo css
body{
margin-top: 250px;
font-family: "Abadi MT Condensed Extra Bold";
font-size:100%;
text-align: left;
background-color: #f9f8f8;
line-height:1.3125em;
}
/*cambio de color de la seleccion*/
::selection { /* Para Safari, Chrome, Konqueror, Opera etc.*/
background: #599d08;
color: #fff; }
::-moz-selection { /* Para Firefox, Flock, etc. */
background: #599d08;
color: #fff; }
h1{
font-size: 39px;
color: #599d08;
text-align: left;
}
p{
font-family: "Tahoma";
font-size: 12px;
color:#000;
text-align: left;
}
#all{
width: 100%;
height: 100%;
overflow: auto;
}
#wrapper{
width: 960px;
height: auto;
margin: 0 auto;
min-width: 100px;
}
#side-a{
width: 550px;
height: auto;
float: left;
overflow: hidden;
}
#side-b{
width: 410px;
height: auto;
float: left;
margin: 0 auto;
}
#footer{
width: 960px;
height: 50px;
clear: both;
}
#flotante{
width: 400px;
height: auto;
position: fixed;
left: 920px;
top: 250px;
z-index: 1000;
overflow: inherit;
}
#pic{
width: 130px;
height: 118px;
float: left;
}
#name{
width: 248px;
height: auto;
float: left;
font-family:"Delicius Bold";
padding-top: 5px;
margin-bottom: 3px;
}
#socials{
width: 242px;
height: 28px;
float: left;
cursor: pointer;
margin-right: 6px;
}
#nav{
width: 248px;
height: 43px;
float: left;
}
#separador{
width: 550px;
height: 1700px;
}
#titulo{
width: 525px;
height: auto;
margin: 5px;
padding-left: 15px;
}
#bloque{
width: 525px;
text-decoration: none;
display: block;
}
#prev{
width: 52px;
height: 52px;
border: 1px solid #599d08;
float: left;
margin-right: 10px;
margin-bottom: 10px;
color: #fff;
}
#opensource{
width: 525px;
height: auto;
margin: 5px;
padding-left: 15px;
overflow: hidden;
}
#iconware{
width: 525px;
height: auto;
margin: 5px;
padding-left: 15px;
overflow: hidden;
}
#contacto{
width: 525px;
height: 540px;
margin: 5px;
padding-left: 15px;
overflow: hidden;
}
Espero la ayuda de uds. De antemano un futuro desempleado :s
