Bonjour

en cette fin d'aprem, je passe mes dernières minutes de boulot à me prendre la tête sur un prob de CSS. Si quelqu'un avait la gentillesse de me filer un coup de main...

J'ai un div dans un autre div :
<div id="encadre_article">
<div id="surtitre_encadre_article">Surtitre de l'encadre</div>
<p class="titre_encadre_article">Titre de l'encadré</p>
<p class="txt_encadre_article">Texte de l'encadré</p>
</div>

Le div qui me pose problème est celui en rouge

L'identifiant #surtitre_encadre_article porte les caractéristiques CSS suivantes :
#surtitre_encadre_article{
background-color: #9e131c;
font-size: 11px;
font-weight: bold;
color: #fff;
width:130px;
padding-left: 5px;
padding-right: 5px;
text-transform:uppercase;
margin: 0px;
}

Je souhaite que ce div rouge puisse faire 2 choses mais en vain :
- se positionner centrer tout en haut de l'encadré
- que le bandeau rouge puisse s'agrandir ou se diminuer en fonction de la longueur du texte qu'il contient.

Merci d'avance de vos idées de génie !

Pour le 1er problème, essaye de rajouter à ton style :

#surtitre_encadre_article{
margin-right:auto;
margin-left:auto;
background-color: #9e131c;
font-size: 11px;
font-weight: bold;
color: #fff;
width:130px;
padding-left: 5px;
padding-right: 5px;
text-transform:uppercase;
margin: 0px;
}