html - <p> tag not working in <div> -

i trying add word "invitations" top right of page aligned "back photos" link. however, when add new <div> start <p> paragraph not align page @ once apply css.

i have uploaded page having trouble: http://ashliamabile.com/invitations.html

this worked me:

html:

<div id="backtophotos">     <a href="print.html"><img src="images/backprint.png" border="0"></a>     <p class="title">invitations</p> </div> 

css:

/*drop width property , set div position:relative */  #backtophotos {     height: 20px;  /* removed width */     background-repeat: no-repeat;     margin: 0 0 0 100px;     position: relative;  /* set positon relative */ }  /* set title p position absolute , remove margins: */  .title {     position: absolute;     right: 0;     top: 0;     margin: 0; } 

the above works because div width "set" outer div, need worry top right corner if change layout. otherwise, float-free right-aligned header.

also, reason explicitly set margins 0 .title because p elements have top , bottom margins set (and think line-height). if changed p div (your choice, , p has value of being more explicitly meant text), .title rule be:

.title {     position: absolute;     right: 0;     top: 0; } 

which looking without additional tricks or tweaks (which name of halloween rap album).

personally, go more like:

<div id="backtophotos">     <h2><a href="print.html">back print</a><h2>     <h2 class="title">invitations</h2> </div> 

and deal clearing of default browser css, above semantic. advise not using image "back print" text , explore 1 of many cir methods out there, screen reader won't able read image aloud.