How to position a span inside a headline tag?

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

Firstly, make sure your HTML document has a DOCTYPE.

Secondly, try adding:

h1 { overflow: hidden; }

Answer 2

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.

Answer 3

Hi!

float: right CSS and IE7 aren't big friends

Try this

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

Or, take a look http://www.makeyougohmm.com/20071019/4873/

Answer 4

Here is another way - it doesn't use positioning, but it requires some extra markup for the left-side text and a clearing element. Works in IE7, but I don't have IE6 to try it.

<style type="text/css"> 
  h1 {
    font-size:small; 
    padding-right:19px; 
    padding-top:5px; 
  }
  .h1subSpan1 { 
    float:left; 
  }
  .h1subSpan2 { 
    float:right; 
  }
</style> 


<h1><div class="h1subSpan1">FOO FOO FOO</div><div class="h1subSpan2">FOO 1 Foo 2</div><br clear="all" /></h1>