How to Get a CSS Element to Display at the Bottom of a Div
Absolute positioning makes it possible to tell the browser exactly where to place an element on the screen. If you want to put a box on the bottom of the screen, for example, you can set its position to “absolute” and then add “bottom: 0;”. Getting the box to float down to the bottom of its containing element, such as a div, requires one more line of code. If the containing element has a relative position, then the bottom-aligned element will go exactly where you want it, at the bottom of the div.
Other People Are Reading
Instructions
-
-
1
Get the ID of both the parent and child elements from your Web page's HTML code. The child element is the one you want to display at the bottom of a div. This can be anything like a paragraph, image or link. The div that contains this element is the parent element:
<div id=”wrapper”>
<div id=”box”><div>
</div>In this example, the “wrapper” div is the parent element. The “box” div the child, and it is what will go at the bottom of “wrapper.”
-
2
Open your CSS stylesheet file or add CSS code between a pair of “<style>” tags found towards the top of the HTML. Add these tags between the “<head>” tags if you do not find them:
<style type=”text/css”>
</style> -
-
3
Set up the bottom-aligned element with absolute positioning, then set the bottom position to zero:
#box {
position: absolute;
bottom: 0;
}If going along with the “box” example, you also need a width, height and a background color to make the box and fill it out:
#box {
position: absolute;
bottom: 0;
width: 200px;
height: 200px;
background-color: red;
} -
4
Add relative positioning to the parent div. You can also give the div a height, especially if you are following along with the “box” example:
#wrapper {
position: relative;
height: 400px;
}When you give relative positioning to a parent element, all of its children will be restricted within its boundaries. If you do not use this trick, then the element you want to bottom align will float down to the bottom of the browser screen.
-
1
