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?

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>

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>

Add this styling to the inner div.

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

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.

See this,

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

CSS positioning at the bottom without absolute positioning

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/

来源：https://stackoverflow.com/questions/26124865/position-div-to-bottom-of-a-different-div-without-using-absolute

标签

html

css

image

css-float

relative

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

Html

CSS