Jak umieścić logo i tekst na boki - html, css

Staram się umieścić na stronie logo i informacje kontaktowe na temat nagłówka HTML za pomocą CSS. Oto co zrobiłem do tej pory:

<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>

Oto 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;

}

Co zrobiłem źle, ponieważ chcę dodać do niego plik obrazu tła?

Odpowiedzi:

Twój znacznik h2 jest zbyt szeroki, spróbuj podać trochę miejsca na dane kontaktowe:

 * {
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

Możesz to zrobić, przypisz pewien identyfikator kontenera do obu treści

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

Dodaj szerokość do kontenera i spraw, aby był unoszący się: w lewo, użyj%, aby uczynić go responsywnym

#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;
}

Próbny