Dimensionamiento capas

Buenos días.
Estoy creando un sitio web y estoy teniendo bastantes problemas con las capas y su interpretación por los navegadores.
Tengo:
body {
 margin-top: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 background-color:#FFFFFF;
 color:#333;
 font-family:Arial,Helvetica,sans-serif;
 font-size:12px;
}
/*END BODY*/
#div1{
 background-color:#FFFFFF;
 float:left;
 margin:0 1%;
 width:30%;
}
#div2{
 float:left;
 width: 22%;
 margin:0 1%;
 background-color:#FFFFFF;
 background : url(sources/blue_background.jpg) repeat;
}
#divconte{
 float:left;
 width: 40%;
 background-color:#FFFFFF;
 padding-left:2%;
 padding-right:2%;
}
#divdet{
 float:left;
 width: 70%;
 background-color:#FFFFFF;
}
En portada sale div1 - divconte - div2 pero en función del zoom del navegador, div2 igual "no cabe" y termina apareciendo abajo a la izq.
¿Podrían indicarme un método que me ayudase a evitar esto? ¿Cómo debería hacerlo en px en lugar de en %?
Gracias