right floated div inside a <h3> tag

ie does not display correctly

[outoorwest]

<Reposted without site links>

This code:
<h3>Get Involved<a href="#">Top</a></h3>

and this css:

h3 a {
float: right;
font-size: 0.7em;
padding: 0px;
margin: 0;
background-color: #567AA0;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}

make for a nice "TOP" link, with the link appearing in the H3 (which is a solid blue bar) on the right side. Works great in firefox and safari. ie displays the link below the H3 tag, floated to the right. Anyone know any way to convince ie to display as the other do?

[rocknbil]

Welcome aboard outdoorwest, why do you need it to float? It's already on the right, just add a space before <a>?

[outoorwest]

The H3 text is left aligned. Making the <a> float right allows the link to be in the box of the h3. Here is the H3 style, maybe that will make it clearer.

h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
color: #FFFFFF;
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
background-color: #567AA0;
text-align: left;
border: 1px solid #34537E;
padding: 5px;
clear: both;
font-style: normal;
}

Like I mentioned, it works well for everyone but ie. But then again, what's new?

[rocknbil]

Ha-ha! Using a valid 4.01 transitional doctype, I'm getting the A down on the second line even in FF. :-)

You have to remember, when you float it floats around "normal flow" content. When you actually put it on the right, I don't know why it creates a new line like that, but it does, it's like there's nothing to flow around so it creates a new line.

Here's your fix, I only tested in FF and IE7, no changes to the CSS:

<h3><a href="#">Top</a>Get Involved</h3>

Which screws up your semantics, but it works.
The only other way I see to do it would be to create a div and float the H3 left and the A right and not nested in the H3, because a left-float must always come first. I'm sure there's a cleaner solution, just not seeing it ATM.