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.