horizontal align image and paragraph - html

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.

Answer 2

This solution is similar to #user45250's but I'm using a vertical alignment technique for mutli-line text in respect to the image.
<header class="cf">
<img src="http://placehold.it/150x100" alt="logo">
<div class="title">
<h2>Title</h2>
<strong>Subtitle</strong>
</div>
</header>
/* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
header {
background: #f1f1f1;
border: black solid;
}
.title {
height: 100px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img, .title {
float: left;
}
I have used the micro clearfix as <header> will collapse as it's child elements have been floated.
JSFiddle

Answer 3

you can easily do this with the table display properties:
html clean up and valid ...
header {
display:table;
width:100%;
text-align:center;/* or was it just vertical-align ? */
border:1px solid
}
header>div {
display:table-cell;
vertical-align:middle;/* or was it just text-align ? */
}
.title_div {
width:1%;
}
<header>
<div class="title_div">
<img src="http://dummyimage.com/100x100/&text=logo" alt="logo" />
</div>
<div>
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
</header>