?
Solved

Align text in DIV to bottom

Posted on 2009-04-28
13
Medium Priority
?
1,683 Views
Last Modified: 2012-05-06
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
0
Comment
Question by:filtrationproducts
  • 6
  • 6
12 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24255998
#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
 
LVL 1

Author Comment

by:filtrationproducts
ID: 24256117
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24256130
<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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:filtrationproducts
ID: 24256161
When I add the <p></p> it shrinks the footer height and adds a floating div window. See the image attached.
Untitled.jpg
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24256172
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
 
LVL 1

Author Comment

by:filtrationproducts
ID: 24256204
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
 
LVL 1

Author Comment

by:filtrationproducts
ID: 24256214
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24256220
Add a height and width declaration to #footer and re-test
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 200 total points
ID: 24256246
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
 
LVL 1

Author Comment

by:filtrationproducts
ID: 24256253
Alright that made the footer visible again, but the text is still in the center.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24256266
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
 
LVL 1

Author Comment

by:filtrationproducts
ID: 24526030
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question