How to Float the Text to the Bottom of a DIV
Positioning and floating of HTML elements is done using Cascading Style Sheets code. The method used to float text to the bottom of its containing element, such as a div, involves the use of absolute and relative positioning. When you give an absolute position to text inside a div that has a relative position setting, the text will be constrained within the div. Once you do this, you can set "bottom" to a value of zero to position the text at the bottom of the div.
Other People Are Reading
Instructions
-
-
1
Open your Web page in Notepad or a code-editing program. Locate the div where you want to float text to the bottom and find its ID name:
<div id="content">
<p>Text to float to the bottom.</p>
</div>
-
2
Add an ID name to the set of tags that wrap around the text you want to float to the
bottom:
<p id="bottom">Text to float to the bottom.</p>
Wrap "<p>" tags or "<div>" tags around the text if it is not yet contained in its own set of tags.
-
-
3
Go to the top of your code, and locate the "<style>" tags. Add these tags if you do not see them:
<style type="text/css">
</style>
Write all CSS code between the "<style>" tags. If you use external style sheets with your websites, add the new CSS code to the appropriate CSS file.
-
4
Give your div a set width and height. Set the "position" property of your div to "relative":
#content {
width: 500px;
height: 200px;
position: relative;
}
Change "content" to the ID name of your div.
-
5
Use the following style rule to force your text to the bottom of the div:
#bottom {
position: absolute;
bottom: 0;
}
Change "bottom" to the ID name you gave to the tags wrapped around your text.
-
1
