Hola, no consigo crear una caja contenedora que no se mueva al restaurar el tamaño de la ventana del navegador.
Con los siguientes datos
en la hoja de estilos:
* {margin: 0; padding: 0;}
html, body {
width: 100%;
height: 100%;
text-align: center;
}
body {
background-color: white;
font-family: Georgia, "Times New Roman", sans-serif;
color: black;
font-weight: normal;
text-align: justify;
font-style: normal;
font-size: 16px;}
#contenedor {
width: 90%;
height: 90%;
margin: 2em auto;
vertical-align: middle;
background-color: #FFCCCC;
overflow:auto
}
#main {
position:absolute;
left:425px;
top:181px;
width:458px;
height:183px;
z-index:1;
font-family: Georgia, "Times New Roman", sans-serif;
font-size: 24px;
font-weight: bold;
color: #990000;
text-align: center;
}
Y el código:
<body>
<div id="contenedor">
<div id="main">
<div align="center">
<p><img src="blablabla.gif" alt="blablabla" width="160" height="120" /></p>
<p> </p>
<p>blablabla</p>
</div>
</div>
</div>
</body>
</html>
Obtengo una caja contenedora que al hacer el RESTORE de la ventana del explorador se me descuajeringa, lo curioso es que el contenido de la caja que le he plantado en el medio se queda estática, con lo que entiendo que estoy haciendo algo mal.
Por favor, ¿sabéis cómo hacer para mantenerla estáticaal igual que la caja y elementos que contiene?, ¿con qué maravillosa propiedad puedo conseguir esto?, porque ¿lo normal no es que la caja contenedora se mueva verdad?
Gracias!!