Question

So, I have a sidebar on my site. It can vary dynamically in height. I want to have a 1px wide border to the right, but I don’t want it to be as tall as the container; it should only be 70% that height. Also, it should be vertically centered to the middle of the container.

How can I do this? Most of the ways I’ve seen require the border’s height to be defined, but I am not able to do that. Is this possible with just CSS? If not, how can I use JavaScript to perform this? Thanks!

Answer 1

I’ve got an idea, it’s supported by FF6 and IE9 + Chrome and Opera 11:

html

<div id="container">
    <div class="border_r"></div>
    contents
</div>

css

#container {
    height: 356px;
    background: #eee;
    position: relative;
}
.border_r {
    border-right: 2px solid red;
    height: 70%;
    position: absolute;
    right: 0px;
    top: 15%;
}

jsFiddle … I have no idea if it will work anywhere else