Border needs to go all the way to page bottom

HTML & CSS
1

Hello,

I have two divs (#maincontent and #sidebar_wrap).

I would like a 1px border along the left side of div#sidebar_wrap that goes to the bottom of the page.

Currently I have border-right: 1px solid #ccc; on div#maincontent

But depending on the content inside div#maincontent, the border stops short, like on this page:
http://t2.pcirs.com/our-company

If I put the border on the left of #sidebar_wrap, the border stops short again if the content inside #maincontent is long, like on this attached screenshot:

Any ideas?

thanks

2

Here is a example of how http://www.ericwwatson.com/. What I did was absolute position a div 1px wide with a background color with height 100%. Or you can use top 0 bottom 0.

3

Or you can use content property and say sidebar:before with the styles. This way no need for extra div.

4

Brilliant!! Thank you :slight_smile:

5

Or for another method you can just add a border to the right float as well and then make the borders sit on top of each other with a negative margin.


#maincontent{
margin-right:-1px;
border-right: 1px solid #CCCCCC;
}
#sidebar_wrap{
border-left:1px solid #ccc;
}

I that way the border will always be as long as the tallest element

6

Oh that’s a nice idea :slight_smile:
thanks you