See attached zip file. I have a common template that I use for multiple pages on my website. The main page div incorporates div#content and div#sidebar. See below codes. I am using a common footer on all pages with a php include() function which is a static bar. There is a vertical line that appears between the content & sidebar because of the thin border between the two. Whenever I have huge text in the content div, this vertical line touches my footer which is quite frustrating to see. On the other hand, whenever I have small text, the vertical line ends right there in the middle making an empty space above the footer.

I want to design my page in a way that this vertical line always appears at least 30 px above footer at all times. I tried adding a separate div after page, but was not successful with that.

Please help out guys.. thanks in advance.

CSS code for page, content and sidebar div's.

#page {
    width: 892px;

#page-bgtop {
    padding: 0px auto;

/* Content */

#content {
    float: right;
    width: 620px;
    padding:0px 10px 10px 30px;

#sidebar {
    float: left;
    width: 208px;

Your line has no css this is form firebug so try to add margin top to footer that is a solution form my point of view