Border needs to go all the way to page bottom


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:

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?


Here is a example of how 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.

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

Brilliant!! Thank you :slight_smile:

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.

border-right: 1px solid #CCCCCC;
border-left:1px solid #ccc;

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

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