IE7 no funciona bien con mi barra lateral flotante

Question

Estoy tratando de hacer flotar una barra lateral de tamaño dinámico en la parte superior derecha de mis páginas web (pero debajo del encabezado y nav) y hacer que el contenido principal en la página fluya alrededor (en una forma de "L", excepto con la parte inferior de la "L" realmente gruesa). El ancho y alto de la barra lateral variará de una página a otra, así que no puedo usar ningún valor difícil.

Mi CSS se ve así:

#main { 
    width: 850px; 
    height: auto; 
} 

#sidebar { 
    width: auto; 
    float: right; 
} 

(más algo de código de color de relleno, margen, y el fondo creo que es intrascendente)

Mi html parece:

<div id="wrapper"> 
    <div id="header"> /* header stuff */ </div> 
    <div id="nav">  /* nav stuff */  </div> 

    <div id="sidebar"> 
     /* my sidebar content, really just an h3 and a ul */ 
    </div> 

    <div id="main"> 
     /* lots of content here */ 
    </div> 
</div> 

Pongo Entiendo completamente por qué tengo que tener primero la div en la barra lateral, pero este código funciona bien en FF, Chrome, Safari (Windows) e IE8. Pero en IE7 (y IE6, que no me importa), el contenido principal se empuja hacia abajo debajo de la barra lateral, como si hubiera un "claro: izquierda" en la barra lateral div (pero no lo hay) .

Tengo la sensación de que este es uno de esos malvados errores de IE7, especialmente porque IE8 se comporta exactamente como los otros navegadores. Pero no tengo idea de cómo solucionarlo.

¿Alguna idea? TIA.

Answer 1

Primero, asegúrese de estar utilizando un doctype que pondrá IE7 en modo estricto (consulte http://hsivonen.iki.fi/doctype/ para una explicación). si eso no lo hace, es posible que necesite algo de juego en el ancho de sus márgenes.

La razón por la que debe tener primero la div de la barra lateral, es que div se muestra como un elemento de bloque después de ella, estará debajo de ella (a menos que flote la div principal).

Al colocar el divisor de la barra lateral y ponerlo primero, el navegador sabe que puede mostrar el div principal a la derecha de la barra lateral. Puede obtener un efecto similar agregando float a la div principal y eliminando el float de la div de la barra lateral y moviéndolo después del div principal.

Answer 2

Según lo que describes, parece que tu barra lateral se comporta como si fuera un elemento de bloque. Tal vez intente algunas opciones de visualización diferentes, como Inline-Block. También intentaré experimentar con los atributos de ancho mínimo de ancho. Sin embargo, es difícil de decir.

Answer 3

Bingo! ¡Fijo! Los chicos que mencionaron jugar con anchos y márgenes obtienen las estrellas doradas esta noche. Resultó que todo lo que tenía que hacer era eliminar el ancho fijo en el div principal, luego agregar algo de relleno a la derecha para crear una canaleta para texto e imágenes. Probado y confirmado en FF3, Chrome, Safari (Win) y lo más importante, IE6 & IE7 (aunque aún odio IE).

Supongo que el motor de renderizado de IE decía: "Veo que quieres que tu división principal tenga 850 px de ancho, pero con esa barra lateral que tienes puesta allí, no tengo espacio, así que tendré que empujarla debajo de la barra lateral ". Por supuesto, el motor de renderizado de cada uno de los otros navegadores decía: "Amigo, entiendo totalmente lo que intentas hacer. No hay problema, diseñaré todo exactamente como te gustaría".