Tengo problemas cuando bajo el zoom en un navegador y me deforma las columnas
Que tengo que no
Logro averiguar lo que le pasa, te
Explico:
Tengo un div contenedor con una anchura de 960px, dentro de
ella tengo dos columnas flotando a cada lado, cada una de ella con 480px que haría
un total de 960px, justo el tamaño de su contenido. Uno de los float tiene un
tamaño de 479px ancho con la suma de 1px de border, es decir 479px de width más
1px de border=480px. Hasta ahí todo
Bien, el problema viene, cuando tu visualizas
esto en cualquier navegador, ie7, 8 o firefox y le pones un zoom menos a 100%, se deforman esas columnas,
la que tiene el border se va para abajo, es como si ya no cupiera junto a la
otra y se desplazara, lo más raro de todo esto es que si en vez de ponerle el
border le pones solo el ancho 480 + 480 no pasa nada o un padding tampoco pasa
nada, solo lo hace cuando le pones un border, te voy a poner un ejemplo
sencillo aquí para que veas lo que te quiero decir, he puesto también las
medidas en %, em… y nada sigue haciendo lo mismo.
Agradecería muchísimo tu ayuda ya que estoy en un proyecto
ahora mismo y no lo saco adelante.
Mil gracias
<!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=utf-8" />
<title>Documento sin título</title>
</head>
<body>
<div
id="padre" style="width:960px; background-color: #F00; height:
200px;">
<div
style="float:left; width: 480px; background-color: #396; height:
200px;"></div>
<div
style="float:left; width: 479px; background-color: #C90;
border-left-color: #000; border-left-style: solid; border-left-width: 1px;
height: 200px;"></div>
</div>
</body>
</html>
Logro averiguar lo que le pasa, te
Explico:
Tengo un div contenedor con una anchura de 960px, dentro de
ella tengo dos columnas flotando a cada lado, cada una de ella con 480px que haría
un total de 960px, justo el tamaño de su contenido. Uno de los float tiene un
tamaño de 479px ancho con la suma de 1px de border, es decir 479px de width más
1px de border=480px. Hasta ahí todo
Bien, el problema viene, cuando tu visualizas
esto en cualquier navegador, ie7, 8 o firefox y le pones un zoom menos a 100%, se deforman esas columnas,
la que tiene el border se va para abajo, es como si ya no cupiera junto a la
otra y se desplazara, lo más raro de todo esto es que si en vez de ponerle el
border le pones solo el ancho 480 + 480 no pasa nada o un padding tampoco pasa
nada, solo lo hace cuando le pones un border, te voy a poner un ejemplo
sencillo aquí para que veas lo que te quiero decir, he puesto también las
medidas en %, em… y nada sigue haciendo lo mismo.
Agradecería muchísimo tu ayuda ya que estoy en un proyecto
ahora mismo y no lo saco adelante.
Mil gracias
<!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=utf-8" />
<title>Documento sin título</title>
</head>
<body>
<div
id="padre" style="width:960px; background-color: #F00; height:
200px;">
<div
style="float:left; width: 480px; background-color: #396; height:
200px;"></div>
<div
style="float:left; width: 479px; background-color: #C90;
border-left-color: #000; border-left-style: solid; border-left-width: 1px;
height: 200px;"></div>
</div>
</body>
</html>
1 respuesta
Respuesta de Victor Portero
1
Lo primero, espero que no estés poniendo el CSS en el HTML, hazlo separado, ahorras código y problemas.
Segunda cosa, cuando pones un border lo que hay que sumar son 2px, porque el border de 1px pone 1px en la izquierda, en la derecha, abajo y arriba.
Por ello el de 1px de border tiene que tener un width de 478px no de 479px.
Porque el de 478px seria así:
1px de border izquierdo + 478px de width + 1px de border derecho = 480px totales.
¿Lo ves ahora?
Segunda cosa, cuando pones un border lo que hay que sumar son 2px, porque el border de 1px pone 1px en la izquierda, en la derecha, abajo y arriba.
Por ello el de 1px de border tiene que tener un width de 478px no de 479px.
Porque el de 478px seria así:
1px de border izquierdo + 478px de width + 1px de border derecho = 480px totales.
¿Lo ves ahora?
