Question

I have a content div that loads different pages. I can’t set fixed position to it because I want to scroll through it’s content.

This div is loaded inside a 100% height table(#main). Problem is, if the content div has small content height(so scrollbar doesn’t appear) my div moves below, like more top margin is applied. I want every page though to load on same y position.
What am I doing wrong?

Note that: Below #content there is a footer div with relative position on which I also don’t want to apply fixed position property. It seems that the more the #footer is dragged down the page it is taking #content with it as well, since they are on same table row.

#main{
    width:1010px;
    height:100%;
}
#content{   
    margin-top:303px;
    padding: 35px;
}
#footer{
    z-index:2;
    position:relative;
}

Answer 1

The problem is that your td height is 100%, and you didn’t set the vertical-align to top. So it default to middle. :

#main td {
    vertical-align: top;
}