nonemauro — 2013-07-25T09:57:18-04:00 — #1
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:
picnictutorials — 2013-07-25T13:20:57-04:00 — #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.
picnictutorials — 2013-07-25T13:24:09-04:00 — #3
Or you can use content property and say sidebar:before with the styles. This way no need for extra div.
nonemauro — 2013-07-25T16:11:11-04:00 — #4
Brilliant!! Thank you
paulob — 2013-07-25T17:46:53-04:00 — #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.
border-right: 1px solid #CCCCCC;
border-left:1px solid #ccc;
I that way the border will always be as long as the tallest element
nonemauro — 2013-07-26T12:10:42-04:00 — #6
Oh that's a nice idea