css - <span> changing layout of website even though position is absolute? -

here code. html:

<div class=column1of4> <a rel="appendix" href="images/watermarks/watermark_pic1.jpg" title="bottle in   mirror"><img src="images/250-width/pic1.jpg" alt="" width="250px" height="250px"     id="bottleinthemirrorpic"></a> <span id="bottleinthemirror" class="spanlink"><p>bottle in mirror<p></span> </div>  <div class=column1of4> <a rel="appendix" href="images/watermarks/watermark_pic9.jpg" title="the empty glass"><img src="images/250-width/pic9.jpg" alt="" width="250px" height="250px"></a> </div>  <div class=column1of4> <a rel="appendix" href="images/watermarks/watermark_pic10.jpg" title="the last drop"><img src="images/250-width/pic10.jpg" alt="" width="250px" height="250px"></a> </div> 

the css:

#bottleinthemirror {     width: 250px;     height: 90px;     position: absolute;     background-color: rgba(0,0,0,.55);     margin-top: 10px;     color: white;     line-height: 20px;     font-size: 12px; } .column1of4 {     margin: 50px;     float: left;     } 

the javascript:

$('#bottleinthemirror').hide(); $('#bottleinthemirrorpic, #bottleinthemirror').hover(function(){  //in   $('#bottleinthemirror').show();  },function(){  //out  $('#bottleinthemirror').hide(); }); 

basically, have 3 pictures, 2 of them beside each other , third 1 below first one. hover on first picture, want #bottleinthemirror span appear, does. problem is, when span hidden, still rearranges layout of website , moves picture below place though it's position set absolute. idea why? when remove span, website layout normal. changes when put in span though spans position absolute.

probably problem span can not contain p, , in code there technically 2 p elements in span (both p tags opening). when browsers fix incorrect markup, part of last p may appear outside span. if there need have p inside .spanlink, it's better use div instead of span. p necessary here?