position div to bottom of containing div

Question

How can i position a div to the bottom of the containing div?

<style>
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}
.inside {
    position: absolute;
    bottom: 2px;
}
</style>
<div class="outside">
    <div class="inside">inside</div>
</div>

This code puts the text "inside" to the bottom of the page.

relative, yes, and then it doesn't know how large it needs to be to hold the child-div content, unfortunately, so unless that is a static-value, back to the original question. How to place one div at the bottom of another div (implied: "without breaking everything"). — JosephK, Aug 20 '17 at 11:40

Karl · Accepted Answer · 2013-03-12T10:42:17.903

146

.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

Needs to be

.outside {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

Absolute positioning looks for the nearest relatively positioned parent within the DOM, if one isn't defined it will use the body.

edited Mar 12 '13 at 10:42

answered Mar 12 '13 at 10:26

Karl

5,435
11
44
70

Thanks. Can you explain why? – nagy.zsolt.hun Mar 12 '13 at 10:27
39

`absolute` searches for the nearest `relative` parent. By default it's the `body` of the `document`. So if no parent DOM object (`.outside`) has the property of being `relative` your `.inside` will go to to the bottom of the body tag. – Mar 12 '13 at 10:29
6

"*Absolute positioning looks for the nearest relatively positioned parent within the DOM, if one isn't defined it will use the body.*" You just explained **so** much for me! Now I really start to understand CSS. ***THANK YOU!*** – Simon Forsberg Apr 28 '14 at 21:22
Absolute actually searches for the nearest non default (= static) positioned ancestor, which is often relatively positioned. It also doesn't have to be a direct parent but can for example be a grandparent. – mzwaal Jan 14 '15 at 09:42
1

This depends on constant heights, which is VERY BAD. A simple change of font, font size, padding, margins and god knows what else demands experimentation to guess the new height. – Anderson Feb 20 '15 at 10:43
@Anderson It's not important to give values to `width` and `height` parameters in implement the above given functionality. You can calculate exclude both of these parameters and it will just work fine. – Raman Sahasi Jul 13 '16 at 06:19
Somehow above code doesn't work in firefox. If you give height as 100%. Any suggestion over this? – NullPointerException Dec 01 '16 at 10:25

score 74 · Answer 2 · answered Mar 12 '13 at 10:26

74

Assign position:relative to .outside, and then position:absolute; bottom:0; to your .inside.

Like so:

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}

answered Mar 12 '13 at 10:26

dsgriffin

66,495
17
137
137

this could be the basis for a sticky footer couldn't it? – cade galt Aug 23 '15 at 16:12
1

I can not use position: absolute; for second div. that is my restriction, can you give me other options? – Dr. Piyush Dholariya Jun 29 '16 at 06:18

score 20 · Answer 3 · answered Mar 12 '13 at 10:30

Add position: relative to .outside. (https://developer.mozilla.org/en-US/docs/CSS/position)

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.

The "initial container" would be <body>, but adding the above makes .outside positioned.

position div to bottom of containing div

3 Answers3

Linked