Blog Wars: Ataque de los DIV's

He pasado las últimas dos horas peleando con la plantilla de este blog porque Internet Explorer no interpreta de igual manera que FireFox los bloques DIV. La historia es que FireFox sigue el estándar en cuando a la reproducción de DIV's que se solapan, pero IE no. Cuando IE encuentra que una línea de texto o una imagen se sale del bloque que lo contiene, tira todos los bloques que son solapados un nivel más abajo, verticalmente. El panel derecho de mi blog ( "sidebar") era empujado al final de todo el contenido en IE, pero en Firefox lucía bien, al lado derecho, cómo lo establece el estándar para los DIV's.

En la plantilla alteré el tamaño de los distintos bloques afectados y terminé con esta configuración:

blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #d8e7f7;
border-right: 6px solid #d8e7f7;
//color: #477fba;
color:#000000;
width: 90%;
overflow:auto;
}

#main-content {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 500px;
}

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 250px;
color: #1c4676;
background-color:#F8F0E9;
}

En verde aparecen los cambios que hice. Con esto, si el texto de las citas ("blockquote") se excede del ancho indicado en píxeles, en Firefox aparece una barra "scrollbar" y en IE el texto continúa en la línea siguiente ("wraps"), eso se logra mediante el atributo "overflow:auto;".

Por cierto, esta es la plantilla que utilizo (estoy alterándola poco a poco):

Blogger Template Style Name: Thisaway (Blue)
Designer: Dan Rubin
URL: www.superfluousbanter.org
Date: 29 Feb 2004

Un arma que fue esencial en esta "batalla" fue la extensión Web Developer de Firefox.

Usando las opciones del menú de Outline pude ver cuáles bloques se solapaban y usando el menú Information pude ver sus tamaños. Esa información me permitió hacer los cambios necesarios en la plantilla. Todo autor de blogs debería tener esa extensión.