Two pages and one CSS, different behavior with a hover popup - css

Question

For the same markup, on two different pages, there's a discrepancy where a hidden div will popup and show itself based on the position of the mouse cursor. Basically, div.blurb will popup way off in the corner on page 1, whereas on page 2 it shows up near the cursor where it's supposed to. Page 2 is missing bolded elements below due to the different layout it has.
Markup hierarchy (bold indicate those that are present on page 1 but not page 2):
html
body
div#cn-body-inner-2col
div#cn-cols
div#cn-centre-col
div#cn-center-col-inner
table.plainTable
tbody
tr
td
div#contact_sheet
div.box
a
img
My markup:
<div id="contact_sheet">
<div class="box">
<img />
<div class="blurb">
</div>
</div>
<div class="box">
<img />
<div class="blurb">
</div>
</div>
...
</div>
CSS for markup:
#contact_sheet{
margin-top: 50px;
}
#contact_sheet .box {
width: 150px;
margin: 5px;
padding: 5px;
float: left;
border: 1px solid #887767;
text-align: center;
background-color: #fff;
}
#contact_sheet .box a img{
height: 100px;
}
#contact_sheet .box .blurb {
position:absolute;
display:none;
z-index:9999;
background-color: #fff;
color:#000;
border: 1px solid black;
width: 300px;
text-align: left;
}
jQuery:
$(document).ready(function(){
$("#contact_sheet div.box").bind("mousemove", function(event) {
$(this).find("div.blurb").css({
top: (event.pageY) + "px",
left: (event.pageX - 150) + "px"
}).show();
}).bind("mouseout", function() {
$("div.blurb").hide();
});
});
Is the following CSS (included within the layout) the problem to my popup hovering further away on page 1 than it should? I used Chrome to go through the hierarchy and grabbed all the styles related to positionning from the bolded items in the markup hierarchy mentionned above.
#cn-body-inner-2col #cn-centre-col {
margin-right: -100%;
}
#cn-centre-col, #cn-centre-col-gap {
float: left;
}
#cn-centre-col {
width: 100%;
}
#cn-centre-col, #cn-head, #cn-foot, #cn-left-col, #cn-right-col {
position: relative;
}
Bad:
http://i.imgur.com/kVbh4.png
Good:
http://i.imgur.com/rJi7n.png
What I've tried:
Adding position: static to my contact_sheet ID - didn't work

Answer 1

I think your problem is the
float:left;
And the
position:relative;
in your #cn-centre-col ID
It make a huge difference for positioning a popup inside it