Hola amigos,
El html
Código:
<html>
<head>
<title>Prueba</title>
<style type="text/css">
/* Los codigos más abajo */
</style>
</head>
<body>
<div id="contenedor">
<div id="izq"></div>
<div id="der"></div>
</div>
</body>
</html>
El problema ya lo estareis viendo. En firefox se me ve bien, pero en internet explorer no.
Vale, eso ya sabemos que pasa. Yo voy a concretar aún más. Pongamos en caso, de que creamos una capa contenedor con un ancho de 900px, y dentro de ella creamos 2 más: Una de 800px (float:left) y otra de 100px(float:right).
Hasta ahí todo se vería bien en los 2 exploradores.
El problema es cuando ponemos a la capa contenedor un margen interior (padding) de 10px por ejemplo.
Código:
div#contenedor {
width:900px;
height: 400px;
padding:10px;
}
div#izq {
width:800px;
height:400px;
float:left;
}
div#der {
width:100px;
height:400px;
float:right;
}
En firefox lo interpreta bien, la suma total del ancho es de 900px;
En internet explorer es de 920px porque suma el padding y es cuando la capa de la derecha (la de 100px) se desborda y sale abajo.
Una solución muy fácil es crear una capa "megacontenedor" de 900px y ponerle el padding de 10px y quitarselo al de contenedor, pero prefiero ahorrarme esa capa.
Seguro que a mucha gente le ha ocurrido este caso, que habeis echo para solucionarlo? Gracias.
Código:
div#megacontenedor {
width: 900px;
padding: 10px;
}
Con esto tendríamos el mismo efecto en los 2 navegadores. Pero con 1 capa más.
Otra solución sin crear el megacontenedor es la siguiente:
A la capa contenedor le hacemos las siguientes modificaciones y queda así:
Código:
div#contenedor {
width:900px;
.width:920px; /* Para ie */
height: 400px;
padding:10px;
}
div#izq {
width:800px;
height:400px;
float:left;
}
div#der {
width:100px;
height:400px;
float:right;
}
Vereis que hay un pequeño 'hacking' en la capa #contenedor, si se le suma el padding hace el mismo efecto que en firefox lo hace automatico.