horizontal align image and paragraph

Question

I am trying to align my image with a title and a subtitle in a web page. I would like the image to be at the left and the title with its subtitle centered at the middle.

 <header>
    <div class="title_div">
        <img src="pictures/logo.png" alt="logo"/>
        <p>
           <h1>Title</h1>
           <h2>Subtitle</h2>
        </p>
     </div>
 </header>

I tried to use the float:left attribute but the image goes out from the header... I saw that because I use the following css attributes:

header{
    background:#f1f1f1;
    border: black solid;
}

I would like to reach something like https://www.ted.com/ but with a subtitle under "Ideas worth spreading".

Answer 1

Using separate div for your logo and your text makes it much cleaner:

<header>
<div class="logo">
  <img src="pictures/logo.png" alt="logo"/>
</div>

<div class="title_div">
 <h1>Title</h1>
 <h2>Subtitle</h2>
</div>
</header>

CSS:

header{
 float:left;
}

.logo{
 float:left;
 margin:20px;
}
.title_div{
 float:left;
}

Note: Just a side note that you have very improper use of HTML. P tag is for paragraph, H1 is for headings, so you cant put heading inside a P tag. Re-structure your HTML.