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:
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.
Or you can use content property and say sidebar:before with the styles. This way no need for extra div.
Brilliant!! Thank you
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
This topic is now closed. New replies are no longer allowed.