CODEWITHSUNDEEP
htmlcss
Alexis King
Alexis King

Reputation: 43852

How to create a right border that's only 70% of its actual size?

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!

Upvotes: 1

Views: 2693

Answers (3)

Nightfirecat
Nightfirecat

Reputation: 11610

You can create a "pseudo-border" using CSS Pseudo-elements. Though the browser support (particularly in the IE department) is not exactly stellar, it's the more semantic (and recommended, if you can drop <IE7 support) way to do it.

Instead, if you don't mind the extra non-semantic element, you can simply do it using an extra <div> inside of your sidebar:

HTML

<div id="example-sidebar">
    <div id="example-border"></div>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</div>

CSS

#example-sidebar{
    background-color: yellow;
    color: black;
    height: 400px;
    margin-left: 1px;   /* Required for 70% height border */
    position: relative; /* Required for 70% height border */
    width: 150px;
}
#example-border{
    background-color: red;
    height: 70%;
    position: absolute;
        left: -1px;
        top: 15%;
    width: 1px;
}

Upvotes: 2

Daniel
Daniel

Reputation: 31579

Try this:

.box:before
{
    width: 1px;
    height: 70%;
    position: relative;
    float: right;
    background-color: black;
    display: block;
    content: '';
}

http://jsfiddle.net/uxNar/

Upvotes: 0

Teneff
Teneff

Reputation: 32158

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

Upvotes: 3

Related Questions