1) Si vas a tener un contenedor con un ancho al 100% mejor no tengas nada. Los navegadores toman el 100% por defecto.
2) En tu código hay un mal manejo de IDs y clases. En el CSS colocas clases y en el HTML IDs.
3) El ancho fijo para tu sección central provocará que las columnas se desajusten apenas la ventana cambie de tamaño. La solución es aplicarle también un ancho relativo y overflow: hidden para que tu imagen se oculte en la capa. Aquí está el código arreglado:
Código:
div#cabcontenedor{
/* Nada */
}
div#cabeceraizq {
width: 10%;
height:143px;
float:left;
}
div#cabeceracen {
width:80%;
overflow: hidden;
height:143px;
background: url(logo.jpg) left top #efefef no-repeat;
float: left;
}
div.cabeceradrc {
width: 10%;
height:143px;
float:left;
}
Para IE:
Código HTML:
<!--[if lte IE 6]>
<style type="text/css">
div#cabeceracen {
width:79%;
}
</style>
<![endif]--> Y tu estructura queda casi igual
Código HTML:
<div id="cabcontenedor">
<div id="cabeceraizq"></div>
<div id="cabeceracen"></div>
<div class="cabeceradrc"></div>
</div>