How do I Position am Element within Heading (H1, H2, etc) tags?

Question

This seems like it should be something easy, yet it is driving me mad!!

I need to be able to position a button, or other input element for that matter to the right of a header element, which also contains text.

The basic markup is:

<h3>Order Details  <input type="button" value="Refund" id="btnRefund"  /></h3>

The desired result is that the text "Order Details" is at the left of the H3 Element and the button is at the right. The obvious solution is to add align:right to the button, however this causes the button to appear outside the H3 element or not inline with the text.

I've tried various combination of the position property on the H3 element and wrapping the text in div and span tags.

I'm sure I kick myself when I get the solution to this.

Edit/Update: I am sticking with nickf's answer (for now anyway) as I'm dealing with quite an old system with the H3 already styled in the external style sheet including background colour etc. There are also many instances of the H3 tag being used without any further elements nested in it and to me it does not make sense to have a div tag replicating the style of the H3 tag to accomodate this.

If I were starting from scratch I might have considered Mark's answer.

Answer 1

You have to put it first

<h3><input type="button" style="float: right">Order Details</h3>

Answer 2

That's not w3c compliant is it?

Can't you wrap the whole thing in a div,

<div><h3>Order Details</h3><input type="button" value="Refund" id="btnRefund"  /></div>

And apply your styles to the div, rather than the h3 if you need some form of uniform look? Float the h3 left or use display:inline so they appear side-by-side.

Answer 3

Well here is what I've ended up with after being inspired by Mark and Nick F. It is a bit of a kludge but appeals to my sensiblities more. The h3 is still the parent element, which to me makes more sense, at least semanticaly.

<h3 style="position:relative;">
   <span style="position:absolute;">Order Details</span>
   <span style="text-align:right;
                width:100%;
                position:absolute">
      <input type="submit" name="btnRefund" value="Refund" id="btnRefund"
         class="TextFields" /></span></h3>

The styles should obviously end up in the style sheet.

The downside to this approach is more mark up, than Nicks answer but no more really than Mark's. There is also the small kludge of putting a non breaking space as the final character in the h3.