position:absolute;top:100%;position:relative;top:-20px;

[prowsej]

#bar_bottom {position:absolute;top:100%;background-color:blue;}


That is the code that I currently have on my page. It takes bar_bottom (which is a div tag that spreads across the entire page) and puts it at the bottom of the page. However, it puts that tag *just* below the bottom of the page so that there will always be a scroll bar. I want to move this object up about 20px.

How would I do both of the following:
position:absolute;top:100%;
position:relative;top:-20px;

to one element? I want to move it down 100% from the top of the page, and I also want the object to be 20px higher than it normally would be.

The example (only works in IE5) is at http://rideau.prowsej.com/RHS0.4/main/

Please see the bar on that page at the extreme bottom of the window.

Edit: Sometimes I don't notice that I've copied the URL and it contains localhost instead of the domain

[tubedogg]

Hint: We can't see your localhost.

[Huntress]

I get the effect I think you're looking for by putting an empty "spacer" DIV tag 20 pixels below the last element on my pages. Note: this is better than using the height property on the DIV tag, because Netscape doesn't support height yet.

Huntress

[creole]

top: 99%

[prowsej]

My server is temporairly down, so you can't check my page (just found out that rogers@home doesn't allow users to run servers!)

In the end I just decided that the aesthetics of the situation weren't worth the only solution that I was able to come up with.

top:99% wouldn't work because it's not scalable enough (at work I know people who run with resolutions of >2000px!)

Your idea for a spacer is what I was going to go with. My plan was to use javascript to detect if there was a scrollbar present in the window. If so, I would position the element normally (let it flow with the text). If there was no scrollbar, I would use CSS to absolutely position the bar at the bottom of the window with bottom:0px

In the end, I should emphasise, I decided to drop this script because not enough browsers supported the javascript and CSS used (once supporting browsers comprise 75% of my audience then I'll consider is safe to employ.)

[Doug Baker]

Well, this may be a little late, but what if you went top:99% and then added

body {
border-bottom: 1% solid #color_of_your_div;
}