Hola a todos.
Quiero realizar un diseño de tres columnas flexibles (con porcentajes), pero tal y como lo hago, funciona en Firefox, pero en IE7 no sale bien.
El problema es que la columna derecha no se ajusta a su lugar. Aparece justo debajo como si no tuviera suficiente espacio en su hueco correspondiente. Y cuando voy haciendo grande o pequeña la ventana, se coloca y descoloca intermitentemente en su lugar.
Lo que hago es símplemente un reparto de porcentajes entre las tres columnas, p. ej: 25% 50% 25%. Los floats los hago así:
left left right, o bien
left left left, da igual. Además, aunque añada o no rellenos al contenido de esas columnas, un nivel más abajo, para separarlo de los bordes de las columnas, en ambos casos ocurre el mismo problema.
También ocurre lo mismo en el caso que haga el reparto de anchuras entre anchos de columna y rellenos al mismo nivel (el de las propias columnas). El fallo en IE7 se sigue produciendo al cambiar el tamaño, aunque en menor medida que antes. P.ej:
Código:
col1 col2 col3
rell ancho rell rell ancho rell rell ancho rell
2.5% 20% 2.5% 2.5% 45% 2.5% 2.5% 45% 2.5% -----> TOTAL: 100%
El único modo que he averiguado para solucionar este problema es restar un 1% a alguno de los anchos asignados, y de esta manera la columna derecha ya se ajusta bien en cualquier caso. Se nota poco la diferencia en el resultado en Firefox. Pero alguien sabe a qué se debe este fallo de IE y cómo solucionarlo de forma más ortodoxa? En Firefox todos los métodos anteriores salen perfectamente bien.