Estoy tratando de crear un diseño basado exclusivamente en HTML y CSS que presenta el contenido principal de una página a la izquierda (que se expande al ancho total ancho, menos el recuadro) y una caja más pequeña a la derecha, digamos para navegación o información de algún tipo. Este es un ejemplo del código que está causando el problema, con los problemas descritos en ella:Floating Div Madness on Window Resize
<!DOCTYPE HTML>
<html lang="en" dir="ltr">
<head>
<title>Floating Div Madness upon Window Resize</title>
<style>
* {margin:0; padding:0}
body {margin:20px; font-size:0px; color:#000000}
div.page {margin-right:120px; background-color:#AAAAFF; float:left}
div.wide {width:300px; background-color:#AAFFAA}
div.box {width:100px; margin-left:-100px; background-color:#FFAAAA; float:left}
h1 {font-size:x-large}
p {padding-bottom:5px; font-size:small}
</style>
</head>
<body>
<div class="page">
<h1>MAIN PAGE</h1>
<p>This is the main portion of the page (light blue). It is currently floated left with a right margin of 120px, to account for the box (light red) as well as the white space between it and the box (light red). All may look well on the surface, but...</p>
<p>Resize the window in Firefox (I tested both 3.5 and 4) and the white margin of the body can be cut off, not only on the right side, but on the bottom of the page, too.</p>
<p>Remove enough text and this div will shrink to fit it, no longer taking up the entire width of the page (minus the box).</p>
<div class="wide">
<p>If I nest another, non-floating div with a fixed width (light green), something even stranger happens when I resize the window, this time in Internet Explorer 6 (maybe in other versions, too): The text in the page div (light blue) is squished, I think by the margin of the box (light red). The fixed width div (light green) is unaffected by this.</p>
</div>
</div>
<div class="box">
<h1>BOX</h1>
<p>(this could be navigation, or anything else)</p>
</div>
</body>
</html>
me gustaría mantener la caja (rojo claro) más adelante en el código por razones semánticas, pero esto es opcional. Aquí están algunas de las cosas más exitosas que ya he intentado, y por qué no parecen funcionar:
Posicionamiento absoluto: Esto parece tan bien como mi propio código cuando los navegadores no cambian de tamaño. Se ocupa de la desaparición del margen del cuerpo en Firefox hasta cierto punto. Sin embargo, cuando el tamaño de la ventana sea lo suficientemente pequeño, el recuadro (rojo claro) irá por encima o por debajo del divisor de la página principal (azul claro), dependiendo del índice z que tenga más alto o más bajo.
Floating only the box: Esto implica cambiar el HTML y colocar el cuadro (rojo claro) antes que el resto del contenido en el código. Esto expande automáticamente la página principal div (azul claro), algo que no he encontrado una manera de hacer (sin una cantidad dada de contenido) usando el método float. Sin embargo, los márgenes del cuerpo todavía se eliminan en Firefox, el texto todavía se debilita en IE, y el recuadro (rojo claro) todavía irá por debajo (de nuevo dependiendo del índice z) del div principal de la página (azul claro) cuando la ventana se vuelve lo suficientemente pequeña
Asignación de ancho mínimo a todo: Esto fue muy exitoso para detener el problema de IE, pero requiere algo de trabajo CSS en una página que es más compleja que esta y que admitirá diferentes tipos de medios. Y, aún no aborda el margen del cuerpo en Firefox o me da una manera de expandir el div de la página principal (azul claro) sin contenido, ya que todavía está flotando.
Cambiar el margen del cuerpo a un borde: Esto tampoco resuelve el problema de Firefox; ya sea un borde o un margen, se corta en la parte derecha e inferior de la página cuando utilizo flotadores.
Agregue el margen a la casilla: Esto tampoco funciona para Firefox. Puedo obtener un margen inferior en el contenido de la página principal (azul claro) para permanecer en su lugar (esto es algo que me parece especialmente curioso), pero un margen derecho en la caja (rojo claro) aún se corta.
Cualquier ayuda sería muy apreciada, ya que no puedo encontrar ningún sitio o mensajes que responden a estos problemas, mucho menos que describe la existencia de estos problemas; Ciertamente he dedicado muchas horas a buscar y probar soluciones.
¿Qué navegadores y versiones te preocupan? Noté esto en su texto: ''Esta vez en Internet Explorer 6 '' - usted * no debería * ser compatible con Internet Explorer 6 a menos que tenga una razón sólida para hacerlo. http://ie6countdown.com/ + http://gs.statcounter.com/#browser_version-ww-monthly-201005-201105 – thirtydot
@ thirtydot Sí, hay algunas buenas razones por las que trato de hacer que esto funcione tan bien como posible en Internet Explorer 6. La intranet principal que estoy diseñando es, para excusas buenas, malas y feas, aún usando IE 6; el administrador es bastante inflexible sobre esto y no se actualizará. Además de IE 6, estoy interesado en los usuarios que visitarán las páginas desde fuera de la intranet; más que probable, tendrán navegadores más modernos. Es por eso que también me preocupa el problema en Firefox 3.5 y 4 que, como el problema de IE 6, no puedo encontrar ninguna documentación para nada. – JBT
Como regla general, no debe hacer flotar un elemento sin especificar su ancho explícitamente. Tu div.page hace esto. Si de alguna manera no puedes utilizar explícitamente un ancho, deberías encontrar otro diseño que no flote en la forma en que tratas de hacer las cosas (por ejemplo, anida el elemento flotante dentro del elemento sin ancho dado). – Frug