I have a footer div on my website, which is set to always appear at the bottom of the page. The problem is, the text in the div is aligning to the top of the div.

 

This is the CSS code for the div:

#footer	{
	position: absolute;
	width: 100%;
	height: 30px;
	text-align: right;
	bottom: 0;
	background-image: url(images/footerbackground.fw.png);
}

This is the HTML code for the div:

<div id="footer"><a href="contactus.html">Contact Us</a> | <a href="copyright.html">Copyright</a> | <a href="feedback.html">Feedback</a> | <a href="brokenlink.html">Report a broken link</a></div>

How can I alter the CSS and/or HTML to make the text align to the bottom of the footer div?

 

Thank you for any help.

Your CSS relates to the footer container, not the content. The "a" tags are inline elements and won't obey the bottom: 0; so I would enclose them in a p tag and then style the p tag which is a block element to show at the bottom of the div.

HTML

 

<div id="footer"><p><a href="contactus.html">Contact Us</a> | <a href="copyright.html">Copyright</a> | <a href="feedback.html">Feedback</a> | <a href="brokenlink.html">Report a broken link</a></p></div>

CSS

I added a height of 150px to the footer and 30px for the p tag and colors to both to show what is happening. The bottom: 0; for the #footer should put the footer at the bottom of your page and then the bottom: 0; for the p tag will put that at the bottom of your footer div.

 

#footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 150px;    
    background: # url(images/footerbackground.fw.png);
    }
#footer p {
    position: absolute;
    width: 100%;
    height: 30px;
    text-align: right;
    bottom: 0;
    height: 30px;
    background: #ff0; }

 

Your CSS relates to the footer container, not the content. The "a" tags are inline elements and won't obey the bottom: 0; so I would enclose them in a p tag and then style the p tag which is a block element to show at the bottom of the div.

HTML

 

<div id="footer"><p><a href="contactus.html">Contact Us</a> | <a href="copyright.html">Copyright</a> | <a href="feedback.html">Feedback</a> | <a href="brokenlink.html">Report a broken link</a></p></div>

CSS

I added a height of 150px to the footer and 30px for the p tag and colors to both to show what is happening. The bottom: 0; for the #footer should put the footer at the bottom of your page and then the bottom: 0; for the p tag will put that at the bottom of your footer div.

 

#footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 150px;    
    background: # url(images/footerbackground.fw.png);
    }
#footer p {
    position: absolute;
    width: 100%;
    height: 30px;
    text-align: right;
    bottom: 0;
    height: 30px;
    background: #ff0; }

Thank you for your help, although it seems to have moved the links nearer to the top of the div rather than to the bottom. Is there something I've done wrong?

 

This is my new CSS code:

#footer	{
	position: absolute;
	width: 100%;
	height: 30px;
	text-align: right;
	bottom: 0;
	background-image: url(images/footerbackground.fw.png);
}

#footer p {
    position: absolute;
    width: 100%;
    height: 30px;
    text-align: right;
    bottom: 0;
    height: 30px;
}

This is my new HTML code:

<div id="footer"><p><a href="contactus.html">Contact Us</a> | <a href="copyright.html">Copyright</a> | <a href="feedback.html">Feedback</a> | <a href="brokenlink.html">Report a broken link</a></p></div>

Is there something I've done wrong?

 

Thank you for any help.

Your #footer and #footer p are both 30px high, so the links will be roughly central in the 30px height, the links will fit the div height. There isn't enough space for the p tag to move to the bottom.

 

You should use a reset css like Meyer's reset http://meyerweb.com/eric/tools/css/reset/ but if you don't want to add all that css, add margin:0; padding: 0; to both styles. P tags have a default top or bottom margin, so that may be affecting the position of the p tag in the div. If you use margin: 0; you should see the links at the bottom of the div if the character font height is less than 30px excluding margin.

Edited September 1, 201313 yr by Wickham

Your #footer and #footer p are both 30px high, so the links will be roughly central in the 30px height, the links will fit the div height. There isn't enough space for the p tag to move to the bottom.

 

You should use a reset css like Meyer's reset http://meyerweb.com/eric/tools/css/reset/ but if you don't want to add all that css, add margin:0; padding: 0; to both styles. P tags have a default top or bottom margin, so that may be affecting the position of the p tag in the div. If you use margin: 0; you should see the links at the bottom of the div if the character font height is less than 30px excluding margin.

Thank you for your help, that worked.

You can set the padding-top property for the texts within the footer DIV, I think it is the easiest way to align the texts to the bottom.