Superposition partielle de deux images

Je souhaite réaliser un bandeau adaptable à la largeur de l'écran . Pour cela , j'ai besoin de superposer partiellement deux images. Ce que je fais :
-image d'arrière-plan centrée (background-position : center)
-une image flottante à gauche
-une image flottante à droite
(la somme des largeurs de l'image de droite et de l'image de gauche est inférieure à la largeur de l'écran)
ça ne marche pas : l'image de droite "passe" à la ligne

Le CSS :
#header {width:100%;
height:300px;
}
#logo {display :block-inline;
float:left;
vertical-align:top;
z-index:10;
}
#centre {background-image:url(../Public/chdefc02.jpg);
background-position : center top ;
z-index:0;
}
#site {display :block-inline;
float:right;
vertical-align:top;
z-index:10;
}

l'html :
<div id="header">
<img id="centre" src="../Public/chdefc02.jpg">
<img id="logo" src="../Public/chdefc01.jpg">
<img id="site" src="../Public/chdefc03.jpg">
</div>

Bonjour,

il faut normalement utiliser le positionnement absolu pour faire ça (sans savoir ce que tu souhaite réellement difficile de t'en dire plus). Si tu n'es pas à l'aise avec ce genre de positionnements, tu trouveras des explications ici : Initiation au positionnement CSS (partie 2). Il y a un autre tuto quelque part sur le le site, il me semble, mais je ne sais plus où

Quelques remarques sur ton code :

- inutile de préciser width : 100% sur ton header, par défaut il va prendre toute la largeur de la page.
- tes z-index sont inutiles si tu ne positionnement pas tes éléments : voir Comment fonctionne la propriété CSS z-index ?
- tu affiches une image en lui déclarant dans la css une image de fond, c'est un peu bizarre
- display :block-inline n'existe pas c'est display : inline-block