Positioning Anchor in Div

I’m unable to move the anchor “Back to Top” vertically it is just locked.


<img class="right" src="images/demo.jpg" alt="right image">
        <br class="clear">
            </div><!--end inner-->
     <div id="buttomlinks"><a href="">Back to Top</a></div>
    <div id="foot"></div>


#buttomlinks a {
  margin: 0px 0px 0px 275px;

Another question, if I wanted to place the words “back” and “forward” to be placed on either side of the words “back to top” should I place each word within a anchor then within a class, then position the words to be placed on either side?

I’m not sure exactly what you want to do, but perhaps using negative margin values or css positioning will help.

It’s being held down by the margin on the .left div:

#inner .left {
        margin:0 0 [COLOR="Red"]32px[/COLOR] 32px;

I’ve removed the margin and including the 32px in the #inner.left and it continues to be locked in to place.

I changed the page by adding a <unordered list> I can’t get the entire <unordered list> to move as a block and give each list spacing as you’ll see it mashed together.

Hi, can you put it back broken with the margin not working? I just placed the margin on the <ul> and it worked just fine. It’s possible the vertical margin was just collapsing for you. A 1px padding or border would have fixed it.

I updated the page, take a look is that what you mean ? How do I space the words apart ?

I got the words spaced apart, but I don’t like the way this code look the page is updated but here is the part of the HTML:

<ul class=“baselinks”><li>
<a href=“#”>Previous</a></li>
<li><a href=“#”>Back to top</a></li>
<a href=“#”>Next</a>

As soon as I add the missing <li></li>

<li><a href=“#”>Next</a></li>

The base of the page breaks.

The 200px right margin on .baselinks li will cause the 3rd li to drop due to insufficient horizontal space on the line.

Consider what you’re trying to achieve here:

  • align “Previous” to the left
  • align “Next” to the right
  • align “Back to top” to the center

You’re not going to do this reliably with margin offsets. Try a combination of centering and absolute positioning.

Firstly, wrap the “Next” anchor in a li and give the “Previous” and “Next” anchors a class.

<ul class="baselinks">
	<li><a class="prev" href="#">Previous</a></li>
	<li><a href="#">Back to top</a></li>
	<li><a class="next" href="#">Next</a></li>

Zero out the default horizontal padding and margin on .baselinks ul (set the vertical to whatever you prefer), set position:relative to allow elements contained within it to be be absolutely positioned relative to the ul, and set the text-align to center for “Back to top”. For IE6, include zoom:1 or another hasLayout trigger (or else .prev will not align to the left).

.baselinks {
	padding: 0;
	margin: 0;
	position: relative;
	text-align: center;
	zoom: 1;

Next, set the li to display inline, and remove the default list style.

.baselinks li {
	display: inline;
	list-style-type: none;

Then give .prev and .next absolute positioning.

.prev, .next {
	position: absolute;

Position .prev to the left and .next to the right.

.prev {
	left: 0;

.next {
	right: 0;

Add the <li> back in, the only thing I see you get iwth it (when adding it via firebug) is a float drop
Also, #foot needs clear:both to clear itself from the list.

But in short, margins IS seperting the <li>'s. As it should :wink:

You have to lower the margins a bit…but yeah.

Thanx Victor, that has fixed it. And to my understanding I have gained some insight into why the <li> were not being positioned correctly.

What is the HTML code that when you click on the link it automatically will scroll back to the top of the page ?

You have to have an element right after <body> starts with an id of “top” (or something. Anything really). Wherever you place the id=“top” element is where it will go.

Then place an anchor and tell it to go there

<a href=“#top”>Go to the top</a>

Thank you :slight_smile:

You’re welcome :slight_smile: