Div cambia anchura

Hola a todos, estoy diseñando un sitio web y tengo un problema con un <div> que por mas que lo intento no logro darle solución. A ver como lo explico, es un diseño muy simple, pero a la hora de añadir contenido a "mainContent" resulta que el width del div correspondiente cambia su valor cuando sobrepaso el borde inferior de ciertos navegadores como firefox, netscape, opera, safari [pero no en IE] ,y aunque no es mucho se nota bastante. He aquí el código, agradecería cualquier ayuda o sugerencia.

Saludos

HTML

<div id="wrapper">
<div id="DBlogo"></div>
<div id="mainNav"></div>
<div id="mainContent"></div>
<div id="footer"></div>
</div>

CSS

body {
margin: 0px;
padding: 0px;
background: url(CSSimgs/headerImg.jpg) repeat-x top;
text-align: center;
min-width: 100%;
max-width: 80%;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #003300;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #333333;
border-bottom: solid 1px #979797 ;
width: 100%;
text-transform: uppercase;
}

#wrapper {
margin: 0px auto;
width: 100%;
height: auto;
min-width: 720px;
max-width: 100%;
padding: 0px;
text-align: left;

}

#DBlogo {
position: relative;
top: 55px;
left: 30px;
width: 310px;
height: 30px;
background: url(CSSimgs/DwBasicLogo.gif) no-repeat center;
}

#mainNav {
border: solid 1px #EBEBEB;
margin-top: 5px;
margin-bottom: 5px;
width: 20%;
height: auto;
float: left;
}

#mainContent{
margin: 5px;
width: 75%;
height: auto;
float: right;
border: solid 1px #D6D6D6;
padding: 5px;
}

#footer{
border-top: solid 1px #EBEBEB;
border-bottom: solid 1px #EBEBEB;
width: 100%;
height: 30px;
margin-top: 10px;
clear: both;
background-color: #161616;
}

Mira, tu problema es en IE6, y por lo que veo tu primero estas haciendo tu web en IE6 y luego probando en otros navegadores, eso es lo peor que puedes hacer, usa Firefox, es un navegador que respeta standares, te asegura que lo veras mejor en otros browsers, y debes dejar la ultima de las pruebas para IE6, porque para IE6 hay que agregar cosas "especiales". IE6 es el navegador que no respeta estandares, los mas modernos si lo hacen (inclusive tu problema no sucede en IE7, pero como usas IE6 no lo estas notando)

En IE6 hay un problema conocido con los floats, agregan un doble margen y tu lo que has hecho es ajustarlo en IE6, pero eso provoca que en los otros se vea mal.

La solucion es que agregues display: inline; en las clases donde usas floats, en #mainNav y #mainContent, con eso veras que se ve igual que en el resto de navegadores, ahora si puedes ajustar tus cambios, lo que necesitas es aumentar un poco mas el margen, porque como te dije antes, el problema con IE6 es que al usar un float en un div, este duplica su margen.

Hola, he seguido el consejo de comprobar mi sitio web en Firefox, por ejemplo, y también he probado añadiendo un display: inline en mainNav y mainContent respectivamente, pero persiste el problema.
No sé si me explique bien anteriormente, pero el caso es que todo está bien hasta que al agregar contenido al div mainContent , algo de texto por ejemplo, una vez excedo cierto límite de height [ más de 800-860pixeles aproximadamente] el width del div mainContent se incrementa, notando así un ligero desplazamiento de los divs mainNav y mainContent.