Adding border to left and right sides [CSS]?

As you can see from this portfolio i'm building:
http://www.josephlavington.com/

...it only needs turqoise borders on the left and right. I was thinking I could use an image to do it (which repeats down the y-axis, so it doesn't break when you add more content) - http://www.josephlavington.com/images/bg_repeat.gif

But how can I implement it with CSS? Any ideas?

Here's the CSS file that's linked:
http://www.josephlavington.com/jlav.css

well the first thing that i would do is create a small turqoise border on the left and right, and try to make the width right. Then take a div and make it a sort of another container for your middle content, then try something like this:



#contentContainer {
background-image:url(whatever.gif);
background-repeat:repeat-x; /*you can make it shorter by adding repeat to bg image but im just explaining it*/
width:500px; /*or whatever works*/
height:auto;
}



Just see if that works for you.
Good luck

I generally follow this format. Make sure you change the heights, widths, and other values necessary to match your design. I just put in dummy values as an example.

Code

<div id="my_container">
<span class="top"></span>
<div class="content">all your content goes here</div>
<span class="bottom"></span>
</div>


CSS

#my_container {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width: 500px;
}

#my_container .top {
background-image: url(urlToTopOfDesign);
background-repeat: no-repeat;
display: block;
height: 6px;
}

#my_container .bottom {
background-image: url(urlToBottomOfDesign);
background-repeat: no-repeat;
display: block;
height: 6px;
overflow: hidden; /* to fix ie6 issue*/
}

#my_container .content {
padding: 0px 5px;
}

Hello Cycleswithin,
Your site seems a perfect candidate for a new technique I've been playing with. Have a look at http://nopeople.com/CSS/slider/ to see it working.
Look at the source to see how it works and especially look at the images.

Here's one image, the one that's being used on the bottom example: http://nopeople.com/CSS/slider/contentcurve2.gif

You have a few things the validator finds that could be fixed.

Hey thanks for the replies everyone.

I attempted to implement sobrien79's method, messed around with the code a bit to try and make it work but still no luck.

I can get a border (using border-left and border-right method - no images), but it doesn't line up properly, and the colour doesn't quite match the turqoise of the top and bottom images (even though I used the same code - must be something to do with web safe colours etc.).

Excavator - I ran my site through the CSS validator and it found no errors, unless you mean in IE? But then, isn't everything broken in IE anyway? :)

I also think I get your technique. Where I have my container, I could just implement a background image that is the same width and have the border on the left and right only, which I think jcdevelopment also proposes.

Anyway, this is my first CSS site - i'll see if I can work on it a bit today.

Your CSS validates but you have 31 errors in your HTML
HTML Validator (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.josephlavington.com%2F)

It doesn't line up because you have whitespace in your header image on the left and right. You'll have to use the image I attached. It is a transparent gif except the blue borders.

Use the bg.gif as the background to your container div.

Assuming you put bg.gif into the images directory:

#container {
background-image: url(images/bg.gif);
background-repeat: repeat-y;
width: 539px;
}

Thanks, that worked!

I was going to implement that method, but didn't get round to it this weekend. :)

Sweet, glad I could help.