16px border down the right side of the site

There are various ways to do this. A very quick way would be to use an absolutely position element. Here's an example:

http://pub.c-o2.net/right.htm

CSS is in the source code.

With this way, you'd have to make sure the text aligned to the right has ample margin space to clear the div (since I've used absolute positioning, the div will be taken out of the flow of the code, and not interact with the other elements (thus may cover the text)).

As mentioned, there are other more standard-based ways. But this may be the quickest (read easiest )

i tried doing that.. but then i run into the problem of height. how do i set the height so that it goes from the banner to the footer?

You don't need to worry about that do you? It looks to me as if the border runs all the way down from top to bottom (of the window).

Therefore, since it's absolutely positioned, it'll run over the top banner and down the side.

Or is the bit over the banner slightly different?

no over the banner is fine.. what i mean is, how do i get it to go all the way down the side? just set height to 100%?

That's right... here's the CSS I used:

	div#right
		{
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 10px;
		background: #630;
		z-index: 100;
		}

ok, great thanks!

PROBLEM!!

ok.. i did what you said.. which i realize now i had done before... and if you go to the page, you'll see that even with a height of 100% the sidebar wont go all the way down...

page: http://www.wornpath.net/galexkeene/index2.html

<div class="sidebar2">&nbsp;</div>

.sidebar2 {
	background-color: #3A3124;
	position: absolute;
	top: 85px;
	right: 0px;
	width: 16px;
	height: 100%;
}

Ah yes... I forgot about this little problem.

Since I got you into this mess, I thought I might as well have a crack at fixing it :roll: .

Here's the link to an update (minus your images, but they won't figure in any of the problem):

http://pub.c-o2.net/right/index.htm

The problem, as you can see from the original, is that the height is 100% of the browser window. Obviously, the content goes beyond the viewport, and past 100%. The fix would be to somehow 'fix' the dark right-hand border to the content. So, this has been done. I've given the content div a border-right comparable to the border you need. Then fixed it to the right of the browser window (with right: 0; ). I've removed the 'left: 100px;' which makes it default to 0px of the parent div (which you classed as .mainbody I think, but I've removed this CSS rule, since you only put in a width of 100%, and by default, a div will be 100% width anyway).

Anyway, adding 100px left margin to the content div, puts the text in its' rightful place.

I've moved a few more things around (think the footer code may have been transposed further up). Oh, and the nav div needs to be absolute, otherwise in IE6, the content div stops at the beginning of the nav div.

I've checked in Safari and Firefox and it seems fine. IE6 is also fine on XP (as is Firefox).