IE7 Hack for float/block bug

Question

I'm having trouble getting this layout to work in IE7:

<span class="box">Headline<a href="more">More...</a></span>

.box {
 display: block;
}

.box a {
 display: inline;
 float: right;
}

All browsers display it in the right manner;

Headline                            More...

But IE7 makes this:

Headline
                                    More...

Any ideas on fixing this? I tried setting the a to block, inline-block, anything, didn't work. Also with some often used fixes like box-model etc.

Answer 1

Try to put the <a> tag at the beginning of the .box

<span class="box"><a href="more">More...</a>Headline</span>