Positioning a link

If you go to http://www.webtutorialz.com/article.php?article_id=28, and scroll to the bottom, you should see a "back to top" link.

I want to get this link to appear in the brown sidebar. However, I don't know how to get the link to stay at the bottom of the sidebar.

Does anyone have any suggestions on how I could do this?

Thanks,
Pádraig

I would create a bottombar div to clear the main content and navigation divs, and place the link text-aligned left, and put your view counter aligned right. Dunno if this is how it should be done though!!

If you put the text in the 'container' div (underneath everything but within the div), apply a clear to it and float it left, it may work. Try it and see what happens.

Pete.

I tried what I suggested with firebug and it seemed to work but it drops lower than the content (because it is clearing it). However, if you give it a negative margin-top of about 65px, it comes back up to roughly level with the bottom of the content. (margin-top:-65px.

Pete.

First solution (a bit hacky): since your content is fixed width, just offset the position of "back to top" to the left:

Code: Select all

p.backToTop [
position: relative;
left: -700px;
}

Second solution (more stable): set the sidebar to position: relative;, put the "back to top" paragraph in the sidebar (so that it is a child element of the sidebar), and then apply:

Code: Select all

p.backToTop {
position: absolute;
bottom: 0;
}

Ironically, position: absolute is relative: relative to the nearest positioned ancestor (in this case, the sidebar).

You will probably need to trigger hasLayout for IE/Win, on the sidebar. For example, set the sidebar height: 1%; in an IE-specific stylesheet. Yuck.

Thanks for the suggestions. We will try them out to see which one is the most effective!