Question

I’m forced to find a solution for the following situation:

I have a h1 tag, like this:

<h1 style="text-align: left">FOO FOO FOO<span class="h1subSpan">FOO 1 Foo 2</span></h1>

The result should be like the following:
FOO FOO FOO this space is invisible and achived through floating Foo1 Foo 2

This solution works with FF, Opera and IE8. How can I adapt this, to work with IE 7 as well?

.h1subSpan
{
  font-size:small;
  float:right;
  padding-right:19px;
  padding-top:5px;
}

Answer 1

Easiest way would be to do the following:

Set the h1 style as position: relative.
Set the .h1subSpan class to have position: absolute; right: 19px; top: 5px;

That should put it where you want, as long as you take off the float: right on the span.