align heading text with subsequent text on the same line - html

Question

I'm tyring to put an 'edit' link on the same line as a heading, off the right of the page and the link text aligned with the bottom of the heading text. I want something like:
want
My first attempt was:
<div>
<div style="float: left; width:600px;background-color: red">
<h1>Something</h1>
</div>
<div style="float: left; background-color: yellow ">
<a href=#>Edit</a>
</div>
</div>
but that gave me:
got
I've tried quite a few things to get the 'Edit' to be aligned along the bottom with the 'Something', but none seem to work.
Has anyone got any suggestions? Is wrapping everything in divs like this the wrong way to go about it?
Thanks in advance for any help.
Edit - arghh, sorry I mixed the two images the wrong way round. The text was correct though, I want the link text to be bottom aligned with the heading text. Fixed now.
Update
Thanks to those who made suggestions and comments.
I've come up with with a few more possibilities (although I realise in stepping back and asking if there's a better approach, in some options I've consequently relaxed the original spec somewhat):
Solution 1: similar to chipcullen's suggestion, but set width in outer div. This has the advantage of bringing the link to within the 600px width:
<div style="position: relative; width: 600px">
<h1>Solution 1</h1>
<a style="position: absolute; bottom: 0; right: 0;href="#">Edit</a>
</div><br/>
Solution 2: as with (1) but, but use my own class rather than H1, and allow the link to float right. This has the advantage (?) of not having to use position: absolute, but you still
need to set margin-top.
<div style="width: 600px">
<span class="myHeader">Solution 2</span>
<a style="float: right; margin-top:14px;" href="#">Edit</a>
</div><br/>
Solution 3: as with (2) but use h1 and override the display attribute. Has the advantage of making using of other attributes defined elsewhere on h1:
<div style="width: 600px">
<h1 style="display:inline;">Solution 3</h1>
<a style="float: right; margin-top:14px;" href="#">Edit</a>
</div><br/>
Solution 4: nest the link element in the h1, and style the link, in this case by specifying a
Twitter Bootstrap button:
<div style="width: 600px">
<h1>Solution 4
<a class="btn" style="margin-top:4px;float: right;" href="#">Edit</a>
</h1>
</div>
They all seem to work, has anyone got any thoughts on which is preferable? Solutions 2 - 4 I guess are a bit more fragile as the hard-wired margin-top setting depends on the h1 line height, but at the same time they feel a bit more concise to me.

Answer 1

You probably don't need the all of the div's. If you really want to get this to behave, you could always use position: absolute;
Markup:
<header>
<h1>Something</h1>
<a class="edit_link" href="#">Edit</a>
</header>
CSS:
header {
position: relative;
}
h1 {
width: 600px;
}
.edit_link {
position: absolute;
top: 0;
right: 0;
}
I'm not saying it's the only right way, but a way.

Answer 2

Try adding this css to the edit float
{
margin:0px;
padding:0px;
border:0px;
}

Answer 3

You could also use two classes for your <div> tag. such as #header and #header-right. It's what I usually use.
Example:
#header {
width: 98%;
min-width: 750px;
height : 45px;
margin : 0 auto;
padding-left: 1%;
padding-right: 1%;
padding-bottom : 4px;
color : #ffffff;
background: #999999;
border-bottom: 1px solid #000000;
}
#header-right {
padding-top: 10px;
padding-right: 10px;
float: right;
}
HTML:
<div id="header">
<h1 >MySite.com</h1>
<p>A site for me. Not you.</p>
<div id="header-right">
<p>Because who wants to share a website...</p>
</div>
</div>

Answer 4

This worked for me:
HTML:
<div class="header">
<h1>Title</h1>
<div>Edit</div>
</div>
CSS:
.header *{
display: inline-block;
}
.header {
text-align: left;
}
You could also set widths etc.

Answer 5

A much simpler way of doing it is:
<div>
<a style="float:right; clear:left" href=#>Edit</a>
<h1>Something</h1>
</div>
Be sure to put the heading after the link, so the link doesn't disappear into the html below that.