Lo que tenes que tener en cuenta es que lo elementos se acomodan segun el espacio.. mira..
<html>
<head>
<style type="text/css">
body{margin: 0px;padding: 0px;}
#wrapper{width: 100%;height: 100%;overflow: hidden;} /* overflow nos salva de que los elementos se acomoden :P, cuando usamos float lo ubicamos a su elemento padre */
#wrapper .header{width: 100%;height: 60px;background-color: #aaa;}
#wrapper .header .logo{width: 200px;height: auto;background-color: #bbb;float: left;} /* Posicionamos el elemento a la izquierda */
#wrapper .header .login{width: 200px;height: auto;background-color: #bbb;float: right;} /* derecha utilizando float */
#wrapper .content{width: 100%;height: 400px;background-color: #ccc;overflow: hidden;} /* oveflow de nuevo por que usamos margin-top */
#wrapper .content .search{width:300px;margin-left:auto;margin-right:auto;margin-top:200px;background-color: #bbb;} /* margin-left y margin-right para que el elemento se posicione en el medio horizontalmente, margin-top para que se acomode mas abajo */
#wrapper .footer{width: 100%;height: 80px;background-color: #ddd;text-align: center;} /* Defino el texto en el centro, nota que solo el texto lo que cambia.. */
#wrapper .footer p{margin: 0px;} /* Le quito la propiedad margin a p, por eso se utiliza un archivo css para resetear estilos.. */
</style>
</head>
<body>
<div id="wrapper">
<div class="header">
<div class="logo">Logo</div>
<div class="login">Login</div>
</div>
<div class="content">
<div class="search">
<form>
<input type="text" name="fname">
<input type="submit" name="fname">
</form>
</div>
</div>
<div class="footer">
<p>Descripcion</p>
</div>
</div>
</body>
</html>
Si estas en firefox(ctrl+shift+m) y ve cambiando de resolucion.. quizas en tu codigo necesites utilizar reglas que se usan para el diseño responsivo, definir la resolucion que te de problema y definirle vos mismo las propiedades css al elemento..
/* Resoluciones 800x600 */
@media screen and (min-width: 600px) and (max-width: 800px) {
#container{
/* Las propiedades que definas se sobre escriben */
}
}
Mostrar Mensajes
