html - image, then align text to right

Question

At this moment, I have:

HTML:

<div class="menu">
    <img src="logo.png" alt="6" />
    <a href="1.html" title="1" id="ton">Hendrerit</a>
    <a href="2.html" title="2" id="ton">Phasellus</a>
</div>

CSS:

.menu img {
    vertical-align: middle;
}
.menu a#ton:link,
.menu a#ton:visited,
.menu a#ton:active {
    display: inline-block;
    padding: 19px;
}

JSFiddle: http://jsfiddle.net/BT5K9/

Which is the best way to align links to right? I want only for modern browsers, so I guess it's something simple. text-align don't work in my case because of the display: inline-block, I guess. Maybe without float? Thanks.

Answer 1

If you're not against using span or float, here's a solution: jsFiddle

Answer 2

If you donot want to use float:

.menu img
{
display: block;
text-align: left;
position: absolute;
}

.menu a
{
text-align: right; 
display:block;  
}

here is jsfidle