I am trying to add the word "Invitations" to the top right of the page aligned with the "back to photos" link. However, when I add a new <div> then start a <p> the paragraph does not align to the page properly at all once I apply CSS.
I have uploaded the page where I am having trouble: http://ashliamabile.com/invitations.html
This worked for me:
<div id="backtophotos">
<a href="print.html"><img src="images/backprint.png" border="0"></a>
<p class="title">invitations</p>
</div>
/*Drop the width property and set div to position:relative */
#backtophotos {
height: 20px; /* removed width */
background-repeat: no-repeat;
margin: 0 0 0 100px;
position: relative; /* set positon to relative */
}
/* Set title p to position absolute and remove margins: */
.title {
position: absolute;
right: 0;
top: 0;
margin: 0;
}
The above works because the div width is already "set" by the outer div, so you only need to worry about where the top right corner actually is if you change the layout. Otherwise, float-free right-aligned header.
Also, the only reason I explicitly set my margins to 0 for the .title is because p elements have their top and bottom margins set (and I think line-height). If you changed the p to a div (your choice, and a p has some value of being more explicitly meant for text), then your .title rule would just be:
.title {
position: absolute;
right: 0;
top: 0;
}
which is exactly what you are looking for without any additional tricks or tweaks (which is the name of my halloween rap album).
Personally, I would actually go with something more like:
<div id="backtophotos">
<h2><a href="print.html">back to print</a><h2>
<h2 class="title">invitations</h2>
</div>
And deal with clearing all of the default browser css, as the above would be most semantic. I would also advise not using the image for your "back to print" text and explore one of the many CIR methods out there, as a screen reader won't be able to read the image aloud.