Position div to bottom of a different div, without using Absolute [closed]

Answer 1

You can do this by setting to top value to 100%.

Html

<div class="outer">
<div class="inner"></div>
</div>

CSS

.outer {height:400px;width:400px;background:#eaeaea;}
.inner {position:relative;top:100%;height:50px; width:50px; background:#fad400;}

check out this fiddle here: http://jsfiddle.net/62wqufgk/

Answer 2

Nowadays you can simply use display: flex for all these alignment issues.

In your case you can simply make the parent a flex, flex-direction column (the default is row) and justify-content: flex-end. The advantage of this approach is that it also works if you have multiple items in the parent.

If you have multiple ones and want to have them all aligned from the beginning of the parent till the end, you can change justify-content to another property such as space-between or space-evenly.

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#inner {
  border: 1px solid green;
  height: 50px;
}

<div id="outer">
  <div id="inner">
  </div>
</div>

Answer 3

Without using position: absolute, you'd have to vertically align it.

You can use vertical-align: bottom which, according to the docs:

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

So, either set the outer div as an inline element, or as a table-cell:

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: bottom;
}

#inner {
  border: 1px solid green;
  height: 50px;
}

<div id="outer">
  <div id="inner">
  </div>
</div>

Answer 4

See this,

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

CSS positioning at the bottom without absolute positioning

Answer 5

Add this styling to the inner div.

position: relative;
top: 100%;
transform: translateY(-100%);

Answer 6

The only way I found, unless your content is a static-height, was to do it with jquery like so:

$(document).ready(function(){
  inner_height = $('#inner-div').height();
  outer_height = $('#outer-div').height();
  margin_calc = (outer_height - inner_height)
  $('#inner-div').css('margin-top', (margin_calc+'px'));
});

This will work for a column-div within a containing-div, if another column's height is larger.

It is unbelievable this simple thing is not 'built in' via a css-property (i.e. "float: bottom"), that doesn't break everything else with absolutes, etc.