This is the CSS I have for my div tag:

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

But it's still displaying the text at the top of the div tag, rather than at the bottom of the div tag. How can I correct this?

 

Thank you for any help.

you will need to make another class so it would look like this

<div id="footer">
    <div class="bottom-align">Your text here</div>
</div>

then for your css

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

Edited August 9, 201313 yr by D4Y0

 

#footer .bottom-allign {
    position:absolute;
    bottom:0;
}

 

Spelling error, should be ".bottom-align".

Spelling error, should be ".bottom-align".

 

Huh? there's nothing wrong with the code DY40 wrote.

 

bottom: 0 will position the very bottom of the child (absolutely positioned) element at the very bottom of it's parent (relativley positioned element)

 

as opposed to top:0 which will have exactly the opposite results..

Huh? there's nothing wrong with the code DY40 wrote.

 

bottom: 0 will position the very bottom of the child (absolutely positioned) element at the very bottom of it's parent (relativley positioned element)

 

as opposed to top:0 which will have exactly the opposite results..

 

I said it was a spelling mistake. Unless we now suddenly spell 'align' with two L's. Look again.

Alternatively, you could use:

 

#footer { display:table-cell; vertical-align:bottom; }

But display:table-cell; isn't supported by IE 7.

Edited August 9, 201313 yr by Lyndsey

my bad, was posting this as i was going out the door this morning

I said it was a spelling mistake. Unless we now suddenly spell 'align' with two L's. Look again.

 

Yep, you're right, Not quite sure how I missed that

Edited August 9, 201313 yr by rbrtsmith

 

you will need to make another class so it would look like this

 

<div id="footer">
    <div class="bottom-align">Your text here</div>
</div>

 

then for your css

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

Thank you for your help, that's aligned the text to the bottom of the div tag. But it isn't aligning the text to the right anymore.

 

This is my CSS now I've altered it:

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

#footer .bottom-align	{
	position: absolute;
	bottom: 0;
}

This is the HTML code I've used:

<div id="footer"><div class="bottom-align"><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></div>

I've tried changing the CSS to this:

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

#footer .bottom-align	{
	position: absolute;
	bottom: 0;
        text-align: right;
}

But I'm still having the same problem. How can I fix this?

 

Thank you for any help.

But it isn't aligning the text to the right anymore.

--------------------------------------------------------------

To achive this you can add

 right:0;

to #footer .bottom-align

But it isn't aligning the text to the right anymore.

--------------------------------------------------------------

To achive this you can add

 right:0;

to #footer .bottom-align

Thank you for your help, that worked.