CODEWITHSUNDEEP
htmlcss
Damian Helme
Damian Helme

Reputation: 1121

align heading text with subsequent text on the same line

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.

Upvotes: 3

Views: 6052

Answers (5)

user3956566
user3956566

Reputation:

A much simpler way of doing it is:

<div>
    <a style="float:right; clear:left" href=#>Edit</a>
    <h1>Something</h1>
</div>

enter image description here

Be sure to put the heading after the link, so the link doesn't disappear into the html below that.

Upvotes: 0

Tony Wickham
Tony Wickham

Reputation: 4766

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.

Upvotes: 0

Keagan Warkentin
Keagan Warkentin

Reputation: 1

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 ><a href="http://mysite.com">MySite.com</a></h1>
  <p>A site for me. Not you.</p>
  <div id="header-right">
    <p>Because who wants to share a website...</p>
  </div>
</div>

Upvotes: 0

TheTechGuy
TheTechGuy

Reputation: 17384

Try adding this css to the edit float

{
margin:0px;
padding:0px;
border:0px;
}

Upvotes: 0

chipcullen
chipcullen

Reputation: 6960

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.

Upvotes: 3

Related Questions