imagenes en web fluida

arnair · #1 (**permalink**) 10/04/2013, 08:58

Hola, estoy haciendo una web fluida y tengo un problema:

Cuando ago mas pequeño el navegador como se ve en la imagen me desparece el div 3, lo que quiero es que solo cambie de tamaño el div 1 y 2 sin que se deforme ni desaparezca el div 3, se puede hacer?

div1 (el verde que tiene dentro el 2 y el 3)

{
float:left;
width:100%;
height: 50px;
background-color: #ebf9b3;

}

div2 (el rojo)

{
float:inherit;
height: 50px;
width: 90%;

text-decoration: none;
margin-left: 5px;

overflow: hidden;
background-color: red;

}

div3 ( la estrella)

{
float: right;
width: 20px;
height: 20px;
margin-top: 15px;
margin-right: 10px;
cursor: pointer;
background-position: -166px -87px;
}

muchas gracias

moro666 · #2 (**permalink**) 11/04/2013, 04:05

Código HTML:

Ver original<html>
<head>
<style>
div1
{
float:left;
width:100%;
height: 50px;
background-color: #ebf9b3;
 
} 
 
 
 
div2
{
float:inherit;
height: 50px;
width: 90%;
 
text-decoration: none;
margin-left: 5px;
 
overflow: hidden;
background-color: red;
 
}
 
div3
{
float: right;
width: 20px;
height: 20px;
margin-top: 15px;
margin-right: 10px;
cursor: pointer;
background-position: -166px -87px; 
}
</style>
</head>
<body>
<div1><div2></div2><div3></div3></div1>
</body>
</html>

He puesto esto en un html, asi sin mas, tal y como lo tienes, y almenos a mi con chrome el div de la derecha se mantiene constante, ni se hace grande ni pekeño.....

Si pudieras subir la web a un hosting gratis o algo para poderlo ver en vivo te podria ayudar mas, supongo....

arnair · #3 (**permalink**) 11/04/2013, 10:15

muchas gracias por contestar

Es muy raro porque a mi no me funciona.

Al final me canse y lo solucione poniendo mas @media screen para ajustarlo

sergi_multimedia · #4 (**permalink**) 12/04/2013, 03:04

Si al div le das un ancho en porcentaje, los margenes tienen que ser en porcentajes, así tienes más control.

Saludos

arnair · #5 (**permalink**) 12/04/2013, 08:40

Tienes razon pero en mi caso no queria que cambiasen.