span inside div and different font size alignment

Question

I have 3 spans inside a div.

<div class="align">
  <span class="a">Title</span>
  <span class="b">Someinfomation</span>
  <span class="c">Toright</span>
</div>

for making the c class to align vertically, I have to use margin-top to fix it however, for IE7 looks differently. Here is online sample: http://jsfiddle.net/wZmGQ/

Yes, I want IE7 works as well. If someone could help me with a better solution?Thanks

Solution is shown below, for someone who looks for IE7 solution

Got the answer from float: right in IE7 dropping to a new line

Try to small change markup: place items with a float before items without it (from the same row). It should help.

Answer 1

Whenever you float an element, you are implicitly declaring display:block. So when you write the following code:

.some-element {
    display: inline-block;
    float: right;
}

... is the same exact thing as doing this:

.some-element {
    display: inline-block;
    display: block;
    float: right;
}

... but I realize that doesn't help you much. Check out this fiddle, sorry I can't test in IE7 at the moment, but see if this helps get you in the right direction:

http://jsfiddle.net/ryanwheale/wZmGQ/3/

Essentially this:

.align{
    border: 1px solid black;
    line-height: 35px; /* larger than your largest font size */
}
.a, .b, .c {
    vertical-align: middle;
}

Answer 2

Create an ie only stylesheet. http://css-tricks.com/how-to-create-an-ie-only-stylesheet/