Estoy aprendiendo a crear diseños sin usar tablas, a base de DIV's y CSS.
Pero me ha surgido un problema con el explorador IE.
Quiero crear mediante DIV's y CSS lo que sería una tabla con 2 columnas.
Suponiendo que lo hubiera hecho con tablas, la tabla mediria 720 pixels, de los cuales la columna de la izquierda mediría 350px y la derecha el resto: 370px.
Para ello he creado una DIV "contenedor" y otras dos "izquierda" y "derecha".
<div id="contenedor">
<div id="izquierda"> </div>
<div id="derecha"> </div>
</div>
y en la CSS tengo el siguiente codigo:
#contenedor {
width:720px;
border-top: 1px solid #999999;
border-right: 1px none #999999;
border-bottom: 1px solid #999999;
border-left: 1px none #999999;
}
#izquierda {
width:350px;
float:left; /* flota en la izquierda*/
background-color: #FFCC33;
}
#derecha {
width:370px;
margin-left:350px; /* se desplaza hacia la derecha*/
background-color: #FF9999;
}
----------------------------
Como 350+370=720 la dos columnas caben en el contenedor... pero esto SOLO OCURRE en Mozilla Firefox, es decir, se ve lo que yo quiero.
En I. Explorer me he dado cuenta que mete entre las dos columnas unos 5 pixeles misteriosos.
Por una parte pensé en restarle esos 5 pixeles a la columna de la derecha para poderla meter, pero... ¿Es lógico este truco chapucero? Supongo que habrá una solución...
y por otra parte me gustaría saber si esos 5 pixeles se pueden eliminar de alguna forma.
Gracias de antemano.