ok, Im trying to make a white vertical line that stretches the entire length of the page regardless of how long the page is. So if the page content gets longer or shorter, the line will automatically adjust.

At the moment Im currently using this code

<div style="position: absolute; left: 540px; top: 0px; width: 5px; height: 100%; background: #ffffff; z-index:1;"></div>

and I have tried everything I can think of... and nothing has worked...

So, basically, havening a 5 px line thats 540 px from the left of the page, going down the entire length of the page (from top to bottom) regardless of how long the content is.

I thought it would be easy when I first did it... but it turned out to be more difficult then I thought. Any help would be much appreciate .

I beleive that the only way to achieve that is by using javascript to alter your div height to a "px" value.
But even that (finding the document total height) is not assured to be working.

See there about the way to find the size of a document.
http://www.howtocreate.co.uk/tutoria.../browserwindow

Well if it's going to stretch to the height of the whole document, wouldn't it be easiest to just use a div that wraps around all contents and add a right border to it? Or can a border be added to the body element?

Or, you could use the faux columns method - create a background graphic that contains the line and set it on the div that you want to stretch. If you want a page to fill the viewport, there are methods to do it that do NOT involve javascript.

yeah, I was looking into the faux columns method before I started this topic. But it doesn't work for what Im trying to do. Im not actually trying to make a boarder, but more of a separator.

http://www.omegatranscended.com/2/

Thats the site (well actually its my friends site and Im just trying to help them out, so sorry bout the messy code)

You can see, that it has a banner, with the content below it (that is what would be stretching the page), and then the white line separating that side from the other side, which consists of links and images.

However, try as I might I just cant get that separation line to reach all the way to the bottom.

I was experementing with variations of the faux columns method, as well as putting all of the content inside a div, but that did not seam to work ether (the line just stopped at the end of the <p> tag, and Im not sure why).

I was also looking into the Javascripted method... I would like to stay away from JS if I can... but if its the only way, how can I use the JS variable in the CSS?

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

(thats from http://www.howtocreate.co.uk/tutoria.../browserwindow)
How can I put the 'scrOfY' variable into the CSS?

<div style="position: absolute; left: 540px; top: 0px; width: 5px; height: scrOfY; background: #ffffff;  z-index:1; "></div>

For some reason I doubt that would work...

Thanks for the suggestions though .
So... what should I do?

If you really want to help your friend out, add a DOCTYPE
Now if this was my site I'd change a lot of the code, simply because it's rather messy, and I'm not sure putting the header image as the background of a div is a good thing...
Now the way I would do this should be simple to do. Simply have three basic things: a wrapper div, a left div, a right div. Then to the left or right div you can add a border, which is exactly what you want as I can see by the page, borders can be coloured, I use them to seperate contents all the time. The only thing you need to have is that both columns are always the same height, since otherwise the border if applied to the wrong one would result in a too short one again.

and I'm not sure putting the header image as the background of a div is a good thing...

Why not ? If it doesn't contain any info and is just decoration, there's no reason NOT to make it a background.

Part of the problem is the position:absolute - on everything - not necessary. Learn to use floats and the normal document flow and you'll have more success.

I don't know why you have all those -moz filters in there, Mozilla browsers support PNGs very well. IE, however (6 and below) does NOT, not w/o a bit of scripting and even then it cannot repeat a transparent PNG.

If all you want is that white line, the faux-background across the entire thing is still the easiest method.

If all you want is that white line, the faux-background across the entire thing is still the easiest method.

Thanks, Ill keep looking into it.

And, thanks for the suggestions. But most of this was just me trying to find a way to stretch that line. I know the code is messy, I said that in my last post . This is more of a proof of concept then anything I guess.
When my friend first made the site, she did it almost entirely in Photoshop.