How to Position My Div At the Bottom of Its Container

How can I position my div at the bottom of its container?

The flexbox approach!

In supported browsers, you can use the following:

Example Here

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent {  height: 100px;  border: 5px solid #000;  display: flex;  flex-direction: column;}.child {  height: 40px;  width: 100%;  background: #f00;  margin-top: auto;}

<div class="parent">  <div class="child">Align to the bottom</div></div>

How to position a div to the bottom of the container, without using absolute positioning?

Don't abandon position: absolute. Simply add padding to the bottom of the container equal to the height of the footer div.

#outer{
    position: relative;
    padding-bottom: 55px;
}

#foot{
    position: absolute;
    height: 55px;
    width: 100%;
    bottom: 0;
    left: 0;
}

Without padding: http://jsfiddle.net/cG5EH/2

With padding: http://jsfiddle.net/cG5EH/1

align divs to the bottom of their container

Why can't you use absolute positioning? Vertical-align does not work (except for tables). Make your container's position: relative. Then absolutely position the internal divs using bottom: 0; Should work like a charm.

EDIT By zoidberg (i will update the answer instead)

<div style="position:relative; border: 1px solid red;width: 40px; height: 40px;">
   <div style="border:1px solid green;position: absolute; bottom: 0; left: 0; width: 20px; height: 20px;"></div>
   <div style="border:1px solid blue;position: absolute; bottom: 0; left: 20px; width: 20px height: 20px;"></div>
</div>

How to align content of a div to the bottom

Relative+absolute positioning is your best bet:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>

How do I get a div to float to the bottom of its container?

After struggling with various techniques for a couple of days I have to say that this appears to be impossible. Even using javascript (which I don't want to do) it doesn't seem possible.

To clarify for those who may not have understood - this is what I am looking for: in publishing it is quite common to layout an inset (picture, table, figure, etc.) so that its bottom lines up with the bottom of the last line of text of a block (or page) with text flowing around the inset in a natural manner above and to the right or left depending on which side of the page the inset is on. In html/css it is trivial to use the float style to line up the top of an inset with the top of a block but to my surprise it appears impossible to line up the bottom of the text and inset despite it being a common layout task.

I guess I'll have to revisit the design goals for this item unless anyone has a last minute suggestion.

Align div at bottom of div container

You are already using flexbox which is great. Now, use margin-top:auto on note__actions to push the div to the bottom.

.note__actions {
  margin-top: auto;  
}

position div to bottom of containing div

.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.

Position div at bottom of containing div

Add position:relative to parent of your #dT element . Only if it is relative you can control the child elements using left , right , bottom and top.

Update:
And to the child elements for which you want to change position using left add position:absolute

P.S : Need to add relative for the div that contains #dT and absolute for #dT

#parentofdT
{
position:relative;
}

#dT
{
position:absolute
}