Question

I have this image that I would like use as a border.

There are 3 inline columns and there will be 2 of these images that separate the center column from the right and left columns.

I can use the css border property but it doesn’t look right as the border passes the image on the top, bottom and through the center. Can this be done and if so, how can I do it?

The thing to keep in mind is that if the center columns grows, the image will need to grow in height with it. I want to stay away from setting a height on the page.

EDIT:

Is there a way to get these borders to grow in height if either the side columns or center columns grow?

<style>
#col1{
display:inline;
float:left;
width:100px;
border:1px solid
}

#col2{
display:inline;
float:left;
width:300px;
border:1px solid
}

#col3{
display:inline;
float:left;
width:100px;
border:1px solid
}
</style>

<div id="col1">1</div>
<div id="col2">2</div>
<div id="col3">3</div>

Where you see the borders now, they should be replaced with this image but the image should grow with the tallest column, whichever one that may be.

Answer 1

To use an image border:

img {border-left: 1px solid #ccc;}
/* assuming that the image is right and you need a border to the left. */

---

From the comments, tried this…

HTML

<div class="wrap">
    <div class="left"><textarea></textarea></div>
    <div class="right">
        <img src="http://i.imgur.com/Dhu0f.jpg" alt="grow" />
    </div>
</div>​

CSS

.wrap {overflow: hidden; height: auto;}
.left, .right {float: left; height: 100%;}
.right img {height: 100%; width: auto;}​

Fiddle: http://jsfiddle.net/N2bVR/

---

Update:

The best option for your question would be, running the border image as a background image to the body and give a repetition on y axis.