Comment mettre le logo et le texte côte à côte - html, css

Je ne parviens pas à placer côte à côte un logo et des informations de contact sur l’en-tête HTML via CSS. Voici ce que j’ai fait jusqu’à présent:

<div id="Principal">
<header>
<img id="Logo" src="/images/decoupe/logo.png" alt="logo" />
<h2 id="Titre">ENGLISH | OFFRES D"EMPLOIS</h2>
<div style="display:block;text-align:left"><img align="left" src="/images/decoupe/tel.png" border="0">CONTACTEZ-NOUS<br>
450.378.0413<br>
1.800.567.1827</div>
</header>

Voici le CSS:

#Principal
{
width:1000px;
margin: auto;
border: solid 1px;

}
#Logo
{
display: inline-block;
margin-left: 25px;
margin-top: 25px;

}
#Titre
{
display: inline-block;
vertical-align: top;
width: 75%;
float: right;
text-align: center;

}

Qu'est-ce que j'ai "mal fait depuis que je veux ajouter un fichier d'image d'arrière-plan avec?"

Réponses:

Votre balise h2 est trop large, essayez de laisser un peu d’espace pour les informations de contact:

 * {
margin: 0;
padding: 0;
}
#Principal {
width:1000px;
border: solid 1px;
}
#Logo {
display: inline-block;
margin-left: 25px;
margin-top: 25px;
}
#Titre {
display: inline-block;
vertical-align: top;
float: right;
text-align: center;
}
#contact {
width: 200px;
height: 150px;
display: inline-block;
}

JSFIDDLE

Vous pouvez le faire en attribuant un identifiant de conteneur au contenu.

HTML

   <header>
<div id="left-content">
<img id="Logo" src="/images/decoupe/logo.png" alt="logo" />
<h2 id="Titre">ENGLISH | OFFRES D"EMPLOIS</h2>

</div>
<div id="right-content">
<img src="/images/decoupe/tel.png" border="0"
/>
<span id="img-content">CONTACTEZ-NOUS
<br/>450.378.0413

<br/>1.800.567.1827
</span>
</div>
</header>

CSS

Ajoutez de la largeur au conteneur et faites-le flotter: à gauche, utilisez% pour le rendre réactif

#Principal {
width:1000px;
margin: auto;
border: solid 1px;
}
#left-content {
width: 70%;
display: inline-block;
float: left;
}
#right-content {
width: 30%;
display: inline-block;
}
#right-content img {
display: inline-block;
float: left;
width: 30%;
height: auto;
}
#img-content {
width: 60%;
display: inline-block;
float: left;
}
#Logo {
display: inline-block;
margin-left: 25px;
margin-top: 25px;
width:15%;
}
#Titre {
display: inline-block;
vertical-align: top;
width: 75%;
text-align: center;
}

Démo