Align text in DIV to bottom

I have a DIV tag and the text in it will not align to the bottom. It is centered directly in the middle. What tag do I need to put in to get it to move down? Below is the code from the style.css file.
#footer {
	text-align: center;
	color: #FFF;
	background-color: #FFF;
	background-image: url(images/bottom.jpg);

Open in new window

Untitled.jpg
LVL 1
filtrationproductsAsked:
Who is Participating?
 
Jason C. LevineNo oneCommented:
Proof of concept:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
 
#footer {
        text-align: center;
        color: #FFF;
        background-color: #FFF;
        background-image: url(images/bottom.jpg);
        position: relative;
		border: thin black solid;
		width: 100%;
		height: 50px;
}
 
#footer p {
        color: #000;
		position:absolute;
        bottom:0px;
		margin: 0;
		padding: 0;
}
 
</style>
</head>
 
<body>
<div id="footer">
        <p>This will align to the bottom of footer</p>
</div>
</body>
</html>

Open in new window

0
 
Jason C. LevineNo oneCommented:
#footer {
        text-align: center;
        color: #FFF;
        background-color: #FFF;
        background-image: url(images/bottom.jpg);
        position: relative;
}

#footer p {
        position:absolute;
        bottom:0;
}

<div id="footer">
        <p>This will align to the bottom of footer</p>
</div>
0
 
filtrationproductsAuthor Commented:
I tried that but it didn't change move the text to the bottom.
---IN STYLE.CSS---
#footer {
	text-align: center;
	color: #FFF;
	background-color: #FFF;
	background-image: url(images/old%20bottom.jpg);
	position: relative;
}
#footer p {
	position:absolute;
	bottom:0px;
}
#footer a { color: #eee; }
 
---IN SOURCE CODE---
 
<div id="footer">Move This Text Down!!</div>

Open in new window

0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
Jason C. LevineNo oneCommented:
<div id="footer">Move This Text Down!!</div>

That's not the code I supplied :)

Try:

<div id="footer"><p>Move This Text Down!!</p></div>

The <p> tag is necessary because we need to tell the browser to align the second container (p) at the bottom of the first (div)
0
 
filtrationproductsAuthor Commented:
When I add the <p></p> it shrinks the footer height and adds a floating div window. See the image attached.
Untitled.jpg
0
 
Jason C. LevineNo oneCommented:
Ignore what happens in Dreamweaver and test in the browser.

Also, the code I supplied is the bare minimum to get it to work.  You may find the need to add other CSS declarations to fit your design.  
0
 
filtrationproductsAuthor Commented:
I made those changes and saved it and opened it in a browser but the text is still directly in the center of that div.

I am sorry, I am pretty new to css
0
 
filtrationproductsAuthor Commented:
I opened it in google chrome and it looked the same as before but when i opened it in internet explorer the entire footer was gone.
0
 
Jason C. LevineNo oneCommented:
Add a height and width declaration to #footer and re-test
0
 
filtrationproductsAuthor Commented:
Alright that made the footer visible again, but the text is still in the center.
0
 
Jason C. LevineNo oneCommented:
See the proof of concept.  

As I said, you may have to zero out margins and padding to account for the <p> automatic spacing.  Since you didn't provide the full source code or CSS, I'm making assumptions about your pages.
0
 
filtrationproductsAuthor Commented:
I could not get it to work. The file im working with is a template so I am not sure how it was setup. I will accept your answer since you said your concept works but to solve it on my end i just added the text to the image itself and linked it using a linked image map.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.