Link with 2 lines text and image - html

Question

How do i create a link like this with HTML and CSS:
It does not respond as i hoped it would.
What i try to accomplish is create a navigation link that hold a image on the left, and 2 lines of text right next to the image and not below the image.
html:
<div id="nav">
<img src="http://www.werkenbijavl.nl/images/WerkenBijAVL/icon-email.png" heigh="24px" width="24px" alt=""> Line 1<br><span>Line 2</span>
</div>
css:
nav a {
background: grey;
padding: 10px;
text-align: center;
text-decoration: none;
line-height: 24px;
vertical-align: middle;
}
nav img {
padding-right: 10px;
}
nav span {
font-style: italic;
}

Answer 1

Inline-block should fix your issues: http://jsfiddle.net/sZnaR/
The HTML:
<a href="#">
<img src="blah" />
<span class="text">
Line 1<br/>
Line 2
</span>
</a>
The CSS:
a {
display: block;
text-decoration: none;
}
a img {
display: inline-block;
width: 30px;
height: 30px;
}
a span {
display: inline-block;
}
Your text elements render as inline elements, and because of that, wrap underneath the image.

Answer 2

You're better off putting the image as a background image on the link using CSS then using Padding to align the text to the image, making sure you've allowed enough padding for the text to clear the image on the left. Also, use the background position to position the image to the right or wherever if you need it there. It also makes the HTML a lot cleaner and easier to read.
edit if you need dynamic images for each link you can always use an inline style to specify the background-image url.

Answer 3

You can also do this by floating it to the left.
Like this
<span style="line-height:15px;float:left">Line 1<br>Line 2</span>
Working Fiddle

Answer 4

HTML:
<div id="nav">
<a href="#">
<img src="http://www.werkenbijavl.nl/images/WerkenBijAVL/icon-email.png" heigh="24px" width="24px">
<div>
Line 1<br>
Line 2
</div>
</a>
</div>
CSS:
#nav img, #nav div{
float: left
}
This will make "Line 1", "Line 2" - and whatever lines you put in their - be always to the right of the image.
If you want text to wrap around the image, change your CSS to be:
#nav img{
float: left
}