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;
    margin-top:35px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
}

#page-bgtop {
    padding: 0px auto;
}


/* Content */

#content {
    float: right;
    width: 620px;
    padding:0px 10px 10px 30px;
    border-left-style:solid;
    border-left-width:thin;
    border-left-color:#828282;
}

#sidebar {
    float: left;
    width: 208px;
    padding:10px;
}

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.