How to Align a Div on the Bottom of Another One

DIVs can inherit their position from a parent division rather than the browser window.

HTML divisions are a great and efficient form of formatting to replace frames and tables. To place objects at a specific point on a page they can be placed within a DIV. When your objects need further formatting within the DIV, for example a navigation bar or image at the bottom of the division, it may be time to add a nested division. Using the position attribute, it is possible to place a nested DIV on the bottom of another.

Instructions

1. Create a DIV inside your current DIV by placing the code between the beginning and ending tags.

2. Add a style and position attribute to the new DIV using "style = "position:inherit;"" before the closing bracket of the DIV tag. This forces the division to position relative to the parent or container DIV.

3. Add "bottom: 0px;" before the ending quotation marks of the code in the previous step. This tells the DIV to stay at the bottom of the parent division.

   For example:

   <div> <div style = "position: inherit; bottom: 0px;"> Div Content Here </div> </div>

Tips & Warnings

• Use "position: absolute;" in combination with the number of pixels from the top, left, right or bottom to specify the location of the parent DIV. This will give you a more precise location for the new DIV.

Resources

• W3Schools: HTML Styles
• W3Schools: CSS Position Property