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;
}