Question

Page:
http://www.serrupro.ca/index.php?option=com_content&view=article&id=5&Itemid=6&lang=fr

Same page but linking to the anchor
http://www.serrupro.ca/index.php?option=com_content&view=article&id=5&Itemid=6&lang=fr#opportunites

My left and right sides move up.

So i’m using the -4000 margin and 4000 padding method so that my left side has a white background all the way to the bottom no matter how long/short the right side is.

This left and right side arer within a container that is overflow:hidden;

This is the only thing i can see that could make theses elements disapear. Without it tho my page doesnt work correctly.

what can i do to fix this? Doesnt seem to be a normal behaviour for an anchor.

thanks for the help in advance

#topcontent {
    position:relative; /* required for ie or 4000px padding/margin visible */
    background-color: #231f20;
    border-left: 1px solid #231f20;
    border-right: 1px solid #231f20;
    overflow:hidden;
}
#topcontent .left {
    position:relative;
    width:703px;
    margin-bottom:-4000px;
    padding-bottom:4000px;
    background:#FFF;
}
#topcontent .right {
    width: 245px;
    float: right;
    margin-bottom:-4000px;
    padding-bottom:4000px;
}

Answer 1

Ugh, well I don’t exactly have an answer for you – I tend to design my columnar layouts using the background image method, or same colored sidebars. However I did find some documentation on this particular “bug”:

http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems

I honestly don’t know of another alternative method besides a javascript solution, which I always try to steer clear of. You would have to do some serious design refactoring for the background-image to even become an option.

Best of luck, and I hope that link helps a bit – they have some workarounds