Div Border Causing Positioning Problems

Can anyone please explain to me why this is happening?

With the border on (http://www.joolzfx.com/test_area/problemborder/html/border-on.html)

With the border off (http://www.joolzfx.com/test_area/problemborder/html/border-off.html)



It is driving me insane and I cannot work out why a border should affect my layout so terribly. The red border was originally put around the nested div, just to help as a visual aid whilst positioning. Now I am unable to remove it, as you can see. Without the border, all of my positioning calculations are shot to the wall, leaving me completely lost. So I desperately need to know why this is happening and how to fix it.

I would be so grateful for any advice.

Many thanks!

See http://complexspiral.com/publications/uncollapsing-margins/

See http://complexspiral.com/publications/uncollapsing-margins/

Thanks, Abdura - but I'm sorry, I just don't understand what collapsing margins have to do with this border problem...?

I think you need it like
#varneyepitaph {/*border-o...style.css (line 9)*/
background:transparent url(../images/interface/staff-swap_varney.jpg) no-repeat scroll 50% 0;
/*border:1px solid #990000;*/
height:370px;
margin:103px 0 0 275px;
padding-top:258px;
width:246px;
}
#varneyepitaph p, #hylandepitaph p {/*border-o...style.css (line 14)*/
color:#000000;
font-size:0.7em;
font-weight:bolder;
line-height:0.9em;
margin-left:15px;
/*margin-top:258px;*/
text-align:justify;
width:190px;
}
?

WOW! Thank you VERY much, Abdura. I followed that and it has completely fixed the problem.

I'm still a bit lost on exactly why it should have happened in the first place, but I can tell this is something to do with using padding and 'transparent' I don't know how it's worked - but it has. I just hope I can remember this, for future reference. Thanks again!

The margin collapse issue is very difficult for me to get my head around. Is it related, because if it is, I'll try and study it.

Doctor V