Position div to bottom of a different div, without

Question

Closed. This question needs debugging details. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 10 months ago.

Improve this question

I have one div in another div. The inner div has margins of 0, auto to centralize it. However, I can't get it to float to the bottom without making it absolute. Is there anyway of making a relative div float to the bottom of a normal div?

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

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.

Answer 5

Add this styling to the inner div.

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

Answer 6

See this,

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

CSS positioning at the bottom without absolute positioning