CSS - 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;
}

min-width: 100%;
max-width: 80%;

¿¿??