Aligning sub-heading "just right" beneath the Heading

I'm very confused about how things like this should be done. I am able to layout a whole site with html and css, but when it comes to things like this, I begin to doubt whether i'm doing it the right way or not.

Can somebody please help me? I am trying to have a H1 and a H3 (or H2) laid out (as shown below) somewhere inside a div that is 25% wide?

Any help is much appreciated, and thank you!

htt开发者_Python百科p://tinypic.com/r/2wd5bfl/7

P.S. I was kinda thinking something like this?:

<div class="yipeee">
   <h1 style="float:left; position:absolute; top:2; left:2;">This is a pretty awesome heading</h1>
   <h3 style="float:right; position:absolute; bottom:2; right:2;"><i>if only it were better than this sub-heading...</i></h3>
</div>

---

Not sure if this is what you're asking for, but here's a solution for the given example:

<h1 id="heading">This is a pretty awesome heading</h1>
<h2 id="subheading">If only it were better than this subheading</h2>

<style type="text/css">
h1#heading { font-size: 36px; font-weight: bold; }
h2#subheading {
    margin-left: 25%;
    font-style: italic;
}
</style>

See the jsFiddle example at http://jsfiddle.net/fausak/WmuRf/

---

Here you go, this is almost exactly the same as the picture:

Here is the example: http://jsfiddle.net/MarkKramer/WmuRf/2/

I used your jsfiddle and edited it and now it is almost exactly like the picture (just the font has to be changed)