How to Make a Div Stick to the Bottom of a Parent Div
Div tags organize content on a Web page and divide the HTML page into sections, typically to simplify formatting. Each Div on the page fits together to form a complete Web page. Users may have one div each for the header, sidebar, content and footer. There is no limit to the number of sections allowed on a site. If you need one div to "stick" to the bottom of another div, utilize both absolute and relative positioning in your coding.
Other People Are Reading
Instructions
-
-
1
Open a blank notepad file for your HTML page.
-
2
Create two div classes in your HTML document. The first one, the parent div, will be "wrapper" for the example and the one on the bottom one for the example is called "bottom." So far, the code is as follows:
<div class="wrapper">
</div><div class="bottom">
</div> -
-
3
Place your content after the class tag, but before the closing </div> tag.
<div class="wrapper">
Parent page content
</div><div class="bottom">
Footer page content
</div> -
4
Add the positioning attributes to your document in the header. The "." indicates that you're styling a class and "position:" specifies how you want to position the section. The "0" in the ".bottom" indicates no margin on each side of the div.
<head>
<style type="text/css">
.wrapper{position:relative;}
.bottom{position:absolute; bottom:0;}
</style></head>
<div class="wrapper">
Parent page content
</div><div class="bottom">
Footer page content
</div>
-
1
Tips & Warnings
Div positioning can be either absolute, which positions itself relative to the first div that is non-statically positioned, or relative, which places it relative to its normal position.
Always close all tags on your page to prevent unexpected errors.
References
- Photo Credit BananaStock/BananaStock/Getty Images
