Muchas gracias
metacortex aunque no me sirve, por varios motivos, por ejemplo si el 80% de la capa central no diera para mostrar todo el logo, no lo mostaría, o en el caso de que ese 80% fuera mas grande que el logo pues ya dejaría ese espacio en blanco.
El problema con los ids y las clases fue porque en mi código lo tenia como clases y al pasarlo aquí me di cuenta que lo debería haber puesto como ids y lo corregí pero solo en el html
De todas formas tus indicaciones me sirvieron de pista y al final la solución era fácil, posicione de manera absoluta y con z-index, a las dos capas laterales les pues el mismo z-index y con el 50% de ancho cada una, y por último puse la capa central que lleva el logo con un z-index mayor, o sea encima de las anteriores, y centrada.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3divs</title>
<style>
div#cabcontenedor{
/* Nada */
}
div#cabeceraizq {
width: 50%;
height:143px;
position:absolute;
background:#9900FF;
z-index:1;
}
div#cabeceracen {
height:143px;
position:absolute;
z-index:10;
left:50%;
margin-left:-390px;/*Este valor es la mitad del ancho de logo.jpg y es para centrarlo*/
}
div#cabeceradrc {
width: 50%;
height:143px;
background:#006633;
position:absolute;
right:0;
z-index:1;
}
</style>
</head>
<body>
<div id="cabcontenedor">
<div id="cabeceraizq"></div>
<div id="cabeceracen"><img src="logo.jpg" /></div>
<div id="cabeceradrc"></div>
</div>
</body>
</html> Saludos ;)