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

Question

Here is my code.
The HTML:
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic1.jpg" title="Bottle in the mirror"><img src="images/250-width/pic1.jpg" alt="" width="250px" height="250px" id="Bottleinthemirrorpic"></a>
<span id="Bottleinthemirror" class="spanlink"><p>Bottle in the 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, I have three pictures, two of them beside each other and the third one is below the first one. Which I hover over the first picture, I want the #bottleinthemirror span to appear, which it does. The problem is, even when the span is hidden, it still rearranges the layout of the website and moves the picture below it to another place even though it's position is set to absolute. Any idea why? When I remove the span, the website layout is normal. It changes when I put in the span even though the spans position is absolute.

Answer 1

Probably the problem is that span can not contain p, and in your code there are technically 2 p elements in the span (both p tags are opening). When browsers fix this incorrect markup, part of the last p may appear outside the span. If there is a need to have p inside .spanlink, it's better to use div instead of span. But is the p really necessary here?

Answer 2

Add
display: block;
to
#Bottleinthemirror

Answer 3

I set this up in a jsfiddle: http://jsfiddle.net/r2XG2/1/ and it appears to be working for me in Chrome. What browser are you in? I would try the following if it's still not working for you:
Set z-index: 100 to see if that will force it to appear over the other elements. You could also try setting the top or left values in css, that may also force it to appear in the correct place. Adding display: block; couldn't hurt either.
Edit: Updated fiddle with latest update from asker it also appears that IE won't load jsfiddle. I added position: relative to the parent div to see if that helps.
#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;
z-index: 100;
display: block;
}
.column1of4 {
margin: 50px;
float: left;
position: relative;
}