Ayuda: maximizar cambia la posicion del los box model

PanchoJ · #1 (**permalink**) 15/04/2009, 18:55

Cuando restauro y maximizo la ventana cambia la posición de los div

Restaurado

img3.uploadhouse.com/fileuploads/3770/37701331db1be3a39f54773e354ad10225690c7.jpg

Maximizado

img9.uploadhouse.com/fileuploads/3770/3770132665be302c48e1695f6a5f258c525b5db.jpg

Mi CSS

div#top{
width:100%;
overflow:hidden;
position:absolute;
top:0;
left:0;
background:white;

}

div#left{
width:20%;
height:70%;
overflow:none;
position:absolute;
float:left;
top:18%;
left:0%;
background:#90EE90;
}
div#right{
width:80%;
height:60%;
overflow:auto;/*Scroll automatico*/
position:absolute;
float:right;
top:18%;
right:0%;
}

div#bottom{
width:100%;
/*height:20%;*/
overflow:hidden;/*Scroll automatico*/
position:absolute;
left:0%;
bottom:0%;
background:white;

}

willyfc · #2 (**permalink**) 15/04/2009, 20:04

lo que pasa es que estas utilizando absolutos creo yo sin ningún motivo, lo que haces es solo una estructura a 2 columnas, mira este ejemplo para ver si te sirve para guiarte:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<!--[if IE 6]><style>#contenedor {width:expression(
(document.documentElement.clientWidth < 770)? "770px" : "auto"
   );}</style><![endif]-->
<style>
#cabecera{ min-width:770px;width:100%; height:80px; background:#CCC;}
#contenedor{ min-width:770px;width:100%;}
#col_izq{width:200px; min-height:300px; height:auto!important; height:300px; float:left; background:#999}
#col_der{overflow:hidden; background:#336699;min-height:300px; height:auto!important; height:300px }
#pie{ min-width:770px;width:100%; height:25px; background:#333}
</style>
</head>
 
<body>
<div id="cabecera"></div>
<div id="contenedor">
    <div id="col_izq"></div>
    <div id="col_der"></div>
</div>
<div id="pie"></div>
</body>
</html>

PanchoJ · #3 (**permalink**) 16/04/2009, 10:59

Ya corregí el código, cambie los porcentajes por px, y saque la position

Este es el resultado

div#top{
min-width:770px;
width:100%;
height:80px;
background:white;
borde-top:1 solid black;
}

#contenedor{
min-width:770px;
width:100%;
}

div#left{
width:180px;
height:400px;
min-height:300px;
overflow:hidden;
float:left;
background:#90EE90;/*Verde claro*/
}
div#right{
height:400px;
min-height:300px;
overflow:none;
background:#999;
}

div#bottom{
min-width:770px;
width:100%;
height:50px;
background:white;
borde-bottom:1 solid black;
}

Código HTML

<div id="top">
<jsp:include page="Encabezado.html"></jsp:include>
</div>
<div id="contenedor">
<div id="left">
<jsp:include page="Menu.jsp"></jsp:include>
</div>
<div id="right">
<jsp:include page="Inicio.html"></jsp:include>
</div>
</div>
<div id="bottom">
<jsp:include page="Pie.html"></jsp:include>
</div>

Calizman · #4 (**permalink**) 16/04/2009, 11:58

Saludos!!

Tengo una pregunta... Esto solucionó tu problema?

willyfc · #5 (**permalink**) 16/04/2009, 13:02

Cita:

Iniciado por CaLiZzZ

Saludos!!

Tengo una pregunta... Esto solucionó tu problema?

exactamente lo mismo iba a preguntar yo.

PanchoJ · #6 (**permalink**) 17/04/2009, 14:30

Disculpen si logre solucionar el problema.

Dejo la solución.

Usaba float en dos div uno para colocar un bloque de texto a la izquierda y otro a la derecha, eso me producía que al maximizar se me separen los bloques del medio.

div#left{float:left;}
div#right{float:right;}

La posicion absolute y top, right, bottom, left, me producía que se separara la parte del medio con respecto a la parte superior e inferior, porque no se alineaban los bloque con respecto a un punto sino se alineaban en base a las partes de la página.

div#top{
position:absolute;
top:0;
left:0;
}

div#left{
position:absolute;
top:18%;
left:0%;
}
div#right{
position:absolute;
top:18%;
right:0%;
}

div#bottom{
position:absolute;
left:0%;
bottom:0%;
}