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

I have floated images and inset boxes at the top of a container using float:right (or left) many times. Recently I hit a need to float a div at the bottom right corner of another div with the normal text wrap that you get with float (text wrapped above and to the left only).

I thought this must be relatively easy even though float has no bottom value but I haven't been able to do it using a number of techniques and searching the web hasn't come up with anything other than using absolute positioning but this doesn't give the correct word wrap behaviour.

I had thought this would be a very common design but apparently it isn't. If nobody has a suggestion I'll have to break my text up into separate boxes and align the div manually but that is rather precarious and I'd hate to have to do it on every page that needs it.

EDIT: Just a note for anyone who comes here. The question linked above as a duplicate is in fact not a duplicate. The requirement that text wrap around the inset element makes it completely different. In fact, the response to the top voted answer here makes it clear why the answer in the linked question is wrong as a response to this question. Anyway, there still doesn't appear to be a general solution to this problem but some of the solutions posted here and in the linked question may work for specific cases.

If you want the text to wrap nicely:-

.outer {_x000D_
  display: table;_x000D_
}_x000D_
_x000D_
.inner {_x000D_
  height: 200px;_x000D_
  display: table-cell;_x000D_
  vertical-align: bottom;_x000D_
}_x000D_
_x000D_
/* Just for styling */_x000D_
.inner {_x000D_
  background: #eee;_x000D_
  padding: 0 20px;_x000D_
}

<!-- Need two parent elements -->_x000D_
<div class="outer">_x000D_
  <div class="inner">_x000D_
    <h3>Sample Heading</h3>_x000D_
    <p>Sample Paragragh</p>_x000D_
  </div>_x000D_
</div>

I got this to work on the first try by adding position:absolute; bottom:0; to the div ID inside the CSS. I did not add the parent style position:relative;.

It is working perfect in both Firefox and IE 8, have not tried it in IE 7 yet.

If you're okay with only the bottom-most line of the text going to the side of the block (as opposed to completely around and underneath it, which you can't do without ending the block and starting a new one), it's not impossible to float a block to one of the bottom corners of a parent block. If you put some content in a paragraph tag within a block and want to float a link to the bottom right corner of the block, put the link within the paragraph block and set it to float: right, then put in a div tag with clear: both set just underneath the end of the paragraph tag. The last div is to make sure the parent tag surrounds the floated tags.

<div class="article" style="display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href="#" style="display: block;float: right;">Read More</a>
        </p>
    <div style="clear: both;"></div>
</div>

I tried several of these techniques, and the following worked for me, so if all else here if all else fails then try this because it worked for me :).

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>

One interesting approach is to stack a couple of right float elements on top of each other.

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

Only problem is that this only works when you know the height of the box.

I had been find this solution for a long time as well. This is what I get:

align-self: flex-end;

link: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ However, I can't remember from where I opened this link. Hope it helps

Set the parent div to position: relative, then the inner div to...

position: absolute; 
bottom: 0;

...and there you go :)

If you're okay with only the bottom-most line of the text going to the side of the block (as opposed to completely around and underneath it, which you can't do without ending the block and starting a new one), it's not impossible to float a block to one of the bottom corners of a parent block. If you put some content in a paragraph tag within a block and want to float a link to the bottom right corner of the block, put the link within the paragraph block and set it to float: right, then put in a div tag with clear: both set just underneath the end of the paragraph tag. The last div is to make sure the parent tag surrounds the floated tags.

<div class="article" style="display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href="#" style="display: block;float: right;">Read More</a>
        </p>
    <div style="clear: both;"></div>
</div>

an alternative answer is the judicious use of tables and rowspan. by setting all table cells on the preceeding line (except the main content one) to be rowspan="2" you will always get a one cell hole at the bottom of your main table cell that you can always put valign="bottom".

You can also set its height to be the minimum you need for one line. Thus you will always get your favourite line of text at the bottom regardless of how much space the rest of the text takes up.

I tried all the div answers, I was unable to get them to do what I needed.

<table>
<tr>
   <td valign="top">
     this is just some random text
     <br> that should be a couple of lines long and
     <br> is at the top of where we need the bottom tag line
   </td>
   <td rowspan="2">
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     is really<br/>
     tall
  </td>
</tr>
<tr>
  <td valign="bottom">
      now this is the tagline we need on the bottom
  </td>
</tr>
</table>

With the introduction of Flexbox, this has become quite easy without much hacking. align-self: flex-end on the child element will align it along the cross-axis.

.container {
  display: flex;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

Output:

.container {_x000D_
  display: flex;_x000D_
  /* Material design shadow */_x000D_
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);_x000D_
  height: 100px;_x000D_
  width: 175px;_x000D_
  padding: 10px;_x000D_
  background: #fff;_x000D_
  font-family: Roboto;_x000D_
}_x000D_
.bottom {_x000D_
  align-self: flex-end;_x000D_
}

<div class="container">_x000D_
  <div class="bottom">Bottom of the container</div>_x000D_
</div>

One interesting approach is to stack a couple of right float elements on top of each other.

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

Only problem is that this only works when you know the height of the box.

I had been find this solution for a long time as well. This is what I get:

align-self: flex-end;

link: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ However, I can't remember from where I opened this link. Hope it helps

This is now possible with flex box. Just set the 'display' of parent div as 'flex' and set the 'margin-top' property to 'auto'. This does not distort any property of both the div.

.parent {_x000D_
  display: flex;_x000D_
  height: 100px;_x000D_
  border: solid 1px #0f0f0f;_x000D_
}_x000D_
.child {_x000D_
  margin-top: auto;_x000D_
  border: solid 1px #000;_x000D_
  width: 40px;_x000D_
  word-break: break-all;_x000D_
}

<div class=" parent">_x000D_
  <div class="child">I am at the bottom!</div>_x000D_
</div>

simple......in the html file right....have the "footer" (or the div you want at the bottom) at the bottom. So dont do this:

<div id="container">
    <div id="Header"></div>
    <div id="Footer"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
</div>

DO THIS: (have the footer underneath.)

<div id="container">
    <div id="Header"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
    <div id="Footer"></div>
</div>

After doing this then you can go the css file and have the "sidebar" float to the left. then have "content" float to the right then have "footer" clear both.

that should work.did for me.

Put the div in another div and set the parent div's style to position:relative; Then on the child div set the following CSS properties: position:absolute; bottom:0;

I got this to work on the first try by adding position:absolute; bottom:0; to the div ID inside the CSS. I did not add the parent style position:relative;.

It is working perfect in both Firefox and IE 8, have not tried it in IE 7 yet.

Pretty old question, but still ... You can float a div to the bottom of the page like this:

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

You can see where the magic happens. I think you could do the same for floating it to the bottom of a parent div.

If you set the parent element as position:relative, you can set the child to the bottom setting position:absolute; and bottom:0;

#outer {_x000D_
  width:10em;_x000D_
  height:10em;_x000D_
  background-color:blue;_x000D_
  position:relative; _x000D_
}_x000D_
_x000D_
#inner {_x000D_
  position:absolute;_x000D_
  bottom:0;_x000D_
  background-color:white; _x000D_
}

<div id="outer">_x000D_
  <div id="inner">_x000D_
    <h1>done</h1>_x000D_
  </div>_x000D_
</div>_x000D_
  

To use css margin-top property with purpose to set footer to the bottom of its container. And to use css text-align-last property to set the footer contents at center.

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

I know it is a very old thread but still I would like to answer. If anyone follow the below css & html then it works. The child footer div will stick with bottom like glue.

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id="MainDiv">
     <div id="footerDiv">
     </div>
</div>

here is my solution:

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>

<div class="footer">
    <div class="bottom-element">bottom-element-in-sidebar</div>
</div>

If you set the parent element as position:relative, you can set the child to the bottom setting position:absolute; and bottom:0;

#outer {_x000D_
  width:10em;_x000D_
  height:10em;_x000D_
  background-color:blue;_x000D_
  position:relative; _x000D_
}_x000D_
_x000D_
#inner {_x000D_
  position:absolute;_x000D_
  bottom:0;_x000D_
  background-color:white; _x000D_
}

<div id="outer">_x000D_
  <div id="inner">_x000D_
    <h1>done</h1>_x000D_
  </div>_x000D_
</div>_x000D_
  

I would just do a table.

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

And the CSS:

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

See it in action:
http://jsfiddle.net/mLphM/1/

I know that this stuff is old, but I recently ran into this problem.

use absolute position divs advice is really silly, because the whole float thing kind of loses point with absolute positions..

now, I did not find an universal solution, but in a lot of cases prople use floating divs just to display something in a row, like a series of span elements. and you can't vertically align that.

to achieve a similar effect you can do this: do not make the div float, but set it's display property to inline-block. then you can align it vertically however it pleases you. you just need to set parent's div property vertical-align to either top, bottom, middle or baseline

i hope that helps someone

Put the div in another div and set the parent div's style to position:relative; Then on the child div set the following CSS properties: position:absolute; bottom:0;

I have acheived this in JQuery by putting a zero width strut element above the float right, then sizing the strut (or pipe) according to parent height minus floated child's height.

Before js kicks in I am using the position absolute approach, which works but allows text flow behind. Therefore I switch to position static to enable the strut approach. (header is the parent element, cutout is the one i want bottom right, and pipe is my strut)

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

The pipe must come 1st, then the cutout, then the text in the HTML order.

You could try using an empty element with a 1px width and floating it. Then clear the element you actually want to position and use the height of the empty element to control how far down it goes.

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}

A combination of floating and absolute positioning does the work for me. I was attempting to place the send time of a message at the bottom-right corner of the speech bubble. The time should never overlap the message body and it will not inflate the bubble unless it's really necessary.

The solution works like this:

1. there're two spans with identical text;
2. one is floated but invisible;
3. the other is absolutely positioned to the corner;

The purpose of the invisible floated one is to ensure space for the visible one.

.speech-bubble {
  font-size: 16px;
  max-width: 240px;
  margin: 10px;
  display: inline-block;
  background-color: #ccc;
  border-radius: 5px;
  padding: 5px;
  position: relative;
}

.inline-time {
  float: right;
  padding-left: 10px;
  color: red;
}

.giant-text {
  font-size: 36px;
}

.tremendous-giant-text {
  font-size: 72px;
}

.absolute-time {
  position: absolute;
  color: green;
  right: 5px;
  bottom: 5px;
}

.hidden {
  visibility: hidden;
}

<ul>
  <li>
    <span class='speech-bubble'>
      This text is supposed to wrap the time &lt;span&gt; which always seats at the corner of this bubble.
      <span class='inline-time'>13:55</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      Absolute positioning doesn't work because it doesn't care if the two pieces of text overlap. We want to float.
      <span class='inline-time'>13:55</span>
    </span>
  </li>

  <li>
    <span class='speech-bubble'>
      Easy, uh?
      <span class='inline-time'>13:55</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      Well, not <span class='giant-text'>THAT</span>
      easy
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      <span class='tremendous-giant-text'>See?</span>
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      The problem is, we can't tell the span to float to right AND bottom...
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      We can combinate float and absolute: use floated span to reserve space (the bubble will be inflated if necessary) so that the absoluted span is safe to go.
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      <span class='tremendous-giant-text'>See?</span>
      <span class='inline-time'>13:56</span>
      <span class='absolute-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      Make the floated span invisible.
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      <span class='tremendous-giant-text'>See?</span>
      <span class='inline-time hidden'>13:56</span>
      <span class='absolute-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      The giant text here is to simulate images which are common in a typical chat app.
      <span class='tremendous-giant-text'>Done!</span>
      <span class='inline-time hidden'>13:56</span>
      <span class='absolute-time'>13:56</span>
    </span>
  </li>
</ul>

Stu's answer comes the closest to working so far, but it still doesn't take into account the fact that your outer div's height may change, based on the way the text wraps inside of it. So, repositioning the inner div (by changing the height of the "pipe") only once won't be enough. That change has to occur inside of a loop, so you can continually check whether you've achieved the right positioning yet, and readjust if needed.

The CSS from the previous answer is still perfectly valid:

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

However, the Javascript should look more like this:

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}

Set the parent div to position: relative, then the inner div to...

position: absolute; 
bottom: 0;

...and there you go :)

simple......in the html file right....have the "footer" (or the div you want at the bottom) at the bottom. So dont do this:

<div id="container">
    <div id="Header"></div>
    <div id="Footer"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
</div>

DO THIS: (have the footer underneath.)

<div id="container">
    <div id="Header"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
    <div id="Footer"></div>
</div>

After doing this then you can go the css file and have the "sidebar" float to the left. then have "content" float to the right then have "footer" clear both.

that should work.did for me.

This puts a fixed div at the bottom of the page and fixes to the bottom as you scroll down

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

Although this is very complicated but it is possible. I have check this code on latest Firefox and Google Chrome browser. Older browser may not support the css shape-outside property. For further detail check this reference.

window.addEventListener('load', function() {
  var imageHolder = document.querySelector('.image-holder');

  var containerHeight = document.querySelector('.container').offsetHeight;

  var imageHolderHeight = imageHolder.offsetHeight;

  var countPadding = containerHeight - imageHolderHeight;
  imageHolder.style.paddingTop = countPadding + 'px';
  containerHeight = document.querySelector('.container').offsetHeight;
  var x1 = '0' + 'px ' + countPadding + 'px';

  var x2 = imageHolder.offsetWidth + 'px' + ' ' + countPadding + 'px';

  var x3 = imageHolder.offsetWidth + 'px' + ' ' + containerHeight + 'px';

  var x4 = 0 + 'px' + ' ' + containerHeight + 'px';

  var value = 'polygon(' + x1 + ',' + x2 + ',' + x3 + ',' + x4 + ')';

  imageHolder.style.shapeOutside = value;

});

.container {
  width: 300px;
  text-align: justify;
  border: 1px solid black;
}

.image-holder {
  float: right;
}

<div class='container' style="">
  <div class='image-holder' style=''>
    <img class='bottom-right' style="width: 100px;" src="https://www.lwb.org.au/services/child-youth-and-family/static/b5cca79df7320248a77f6655a278190f/a6c62/img-index-banner.jpg" alt="">
  </div>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quasi ut ipsam saepe, dignissimos, accusamus debitis ratione neque doloribus quis exercitationem iure! Harum quisquam ipsam velit distinctio tempora repudiandae eveniet.</div>

</div>

To put any element at the bottom of its container, just used this:

div {
    position: absolute;
    bottom: 0px;
}

A chose this approach of @dave-kok. But it works only if the whole content suits without scrolling. I appreciate if somebody will improve

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

Here is code http://jsfiddle.net/d9t9joh2/

Pretty old question, but still ... You can float a div to the bottom of the page like this:

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

You can see where the magic happens. I think you could do the same for floating it to the bottom of a parent div.

Not sure, but a scenario posted earlier seemed to work if you use position: relative instead of absolute on the child div.

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}

<div id="parent">
    This has some text in it.

    <div id="child">
        This is just some text to show at the bottom of the page
    </div>
</div>

And no tables...!

To use css margin-top property with purpose to set footer to the bottom of its container. And to use css text-align-last property to set the footer contents at center.

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

If you want the text to wrap nicely:-

.outer {_x000D_
  display: table;_x000D_
}_x000D_
_x000D_
.inner {_x000D_
  height: 200px;_x000D_
  display: table-cell;_x000D_
  vertical-align: bottom;_x000D_
}_x000D_
_x000D_
/* Just for styling */_x000D_
.inner {_x000D_
  background: #eee;_x000D_
  padding: 0 20px;_x000D_
}

<!-- Need two parent elements -->_x000D_
<div class="outer">_x000D_
  <div class="inner">_x000D_
    <h3>Sample Heading</h3>_x000D_
    <p>Sample Paragragh</p>_x000D_
  </div>_x000D_
</div>

This puts a fixed div at the bottom of the page and fixes to the bottom as you scroll down

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

You could try using an empty element with a 1px width and floating it. Then clear the element you actually want to position and use the height of the empty element to control how far down it goes.

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}

Put the div in another div and set the parent div's style to position:relative; Then on the child div set the following CSS properties: position:absolute; bottom:0;

Oh, youngsters.... Here you are:

<div class="block">
    <a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class="r-b">A right-bottom-block with some information</span>
    </span>
    <span class="clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

No absolute position! Responsive! OldSchool

I tried this scenario posted earlier also;

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

The absolute positioning fixes the div to the lowest part of the browser upon loading the page, but when you scroll down if the page is longer it does not scroll with you. I changed the positioning to be relative and it works perfect. The div goes straight to the bottom upon load so you won't actually see it until you get to the bottom.

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

A way to make it work is the following:

• Float your elements left like normal

• Rotate the parent div 180 degrees using

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  

  JSfiddle: http://jsfiddle.net/wcneY/

• Now rotate all the elements that float left (give them a class) 180 degrees to put them straight again. Voila! they float to the bottom.

To put any element at the bottom of its container, just used this:

div {
    position: absolute;
    bottom: 0px;
}

A chose this approach of @dave-kok. But it works only if the whole content suits without scrolling. I appreciate if somebody will improve

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

Here is code http://jsfiddle.net/d9t9joh2/

Set the parent div to position: relative, then the inner div to...

position: absolute; 
bottom: 0;

...and there you go :)

I know it is a very old thread but still I would like to answer. If anyone follow the below css & html then it works. The child footer div will stick with bottom like glue.

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id="MainDiv">
     <div id="footerDiv">
     </div>
</div>

With the introduction of Flexbox, this has become quite easy without much hacking. align-self: flex-end on the child element will align it along the cross-axis.

.container {
  display: flex;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

Output:

.container {_x000D_
  display: flex;_x000D_
  /* Material design shadow */_x000D_
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);_x000D_
  height: 100px;_x000D_
  width: 175px;_x000D_
  padding: 10px;_x000D_
  background: #fff;_x000D_
  font-family: Roboto;_x000D_
}_x000D_
.bottom {_x000D_
  align-self: flex-end;_x000D_
}

<div class="container">_x000D_
  <div class="bottom">Bottom of the container</div>_x000D_
</div>

Put the div in another div and set the parent div's style to position:relative; Then on the child div set the following CSS properties: position:absolute; bottom:0;

If you need relative alignment and DIV's still aren't give you what you want, just use tables and set valign = "bottom" in the cell you want the content aligned to the bottom. I know it's not a great answer to your question since DIV's are supposed to replace tables, but this is what I had to do recently with an image caption and it has worked flawlessly so far.

Although this is very complicated but it is possible. I have check this code on latest Firefox and Google Chrome browser. Older browser may not support the css shape-outside property. For further detail check this reference.

window.addEventListener('load', function() {
  var imageHolder = document.querySelector('.image-holder');

  var containerHeight = document.querySelector('.container').offsetHeight;

  var imageHolderHeight = imageHolder.offsetHeight;

  var countPadding = containerHeight - imageHolderHeight;
  imageHolder.style.paddingTop = countPadding + 'px';
  containerHeight = document.querySelector('.container').offsetHeight;
  var x1 = '0' + 'px ' + countPadding + 'px';

  var x2 = imageHolder.offsetWidth + 'px' + ' ' + countPadding + 'px';

  var x3 = imageHolder.offsetWidth + 'px' + ' ' + containerHeight + 'px';

  var x4 = 0 + 'px' + ' ' + containerHeight + 'px';

  var value = 'polygon(' + x1 + ',' + x2 + ',' + x3 + ',' + x4 + ')';

  imageHolder.style.shapeOutside = value;

});

.container {
  width: 300px;
  text-align: justify;
  border: 1px solid black;
}

.image-holder {
  float: right;
}

<div class='container' style="">
  <div class='image-holder' style=''>
    <img class='bottom-right' style="width: 100px;" src="https://www.lwb.org.au/services/child-youth-and-family/static/b5cca79df7320248a77f6655a278190f/a6c62/img-index-banner.jpg" alt="">
  </div>
  <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quasi ut ipsam saepe, dignissimos, accusamus debitis ratione neque doloribus quis exercitationem iure! Harum quisquam ipsam velit distinctio tempora repudiandae eveniet.</div>

</div>

Not sure, but a scenario posted earlier seemed to work if you use position: relative instead of absolute on the child div.

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}

<div id="parent">
    This has some text in it.

    <div id="child">
        This is just some text to show at the bottom of the page
    </div>
</div>

And no tables...!

This is now possible with flex box. Just set the 'display' of parent div as 'flex' and set the 'margin-top' property to 'auto'. This does not distort any property of both the div.

.parent {_x000D_
  display: flex;_x000D_
  height: 100px;_x000D_
  border: solid 1px #0f0f0f;_x000D_
}_x000D_
.child {_x000D_
  margin-top: auto;_x000D_
  border: solid 1px #000;_x000D_
  width: 40px;_x000D_
  word-break: break-all;_x000D_
}

<div class=" parent">_x000D_
  <div class="child">I am at the bottom!</div>_x000D_
</div>

A way to make it work is the following:

• Float your elements left like normal

• Rotate the parent div 180 degrees using

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  

  JSfiddle: http://jsfiddle.net/wcneY/

• Now rotate all the elements that float left (give them a class) 180 degrees to put them straight again. Voila! they float to the bottom.

Stu's answer comes the closest to working so far, but it still doesn't take into account the fact that your outer div's height may change, based on the way the text wraps inside of it. So, repositioning the inner div (by changing the height of the "pipe") only once won't be enough. That change has to occur inside of a loop, so you can continually check whether you've achieved the right positioning yet, and readjust if needed.

The CSS from the previous answer is still perfectly valid:

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

However, the Javascript should look more like this:

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}

I tried several of these techniques, and the following worked for me, so if all else here if all else fails then try this because it worked for me :).

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>

Set the parent div to position: relative, then the inner div to...

position: absolute; 
bottom: 0;

...and there you go :)

A combination of floating and absolute positioning does the work for me. I was attempting to place the send time of a message at the bottom-right corner of the speech bubble. The time should never overlap the message body and it will not inflate the bubble unless it's really necessary.

The solution works like this:

1. there're two spans with identical text;
2. one is floated but invisible;
3. the other is absolutely positioned to the corner;

The purpose of the invisible floated one is to ensure space for the visible one.

.speech-bubble {
  font-size: 16px;
  max-width: 240px;
  margin: 10px;
  display: inline-block;
  background-color: #ccc;
  border-radius: 5px;
  padding: 5px;
  position: relative;
}

.inline-time {
  float: right;
  padding-left: 10px;
  color: red;
}

.giant-text {
  font-size: 36px;
}

.tremendous-giant-text {
  font-size: 72px;
}

.absolute-time {
  position: absolute;
  color: green;
  right: 5px;
  bottom: 5px;
}

.hidden {
  visibility: hidden;
}

<ul>
  <li>
    <span class='speech-bubble'>
      This text is supposed to wrap the time &lt;span&gt; which always seats at the corner of this bubble.
      <span class='inline-time'>13:55</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      Absolute positioning doesn't work because it doesn't care if the two pieces of text overlap. We want to float.
      <span class='inline-time'>13:55</span>
    </span>
  </li>

  <li>
    <span class='speech-bubble'>
      Easy, uh?
      <span class='inline-time'>13:55</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      Well, not <span class='giant-text'>THAT</span>
      easy
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      <span class='tremendous-giant-text'>See?</span>
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      The problem is, we can't tell the span to float to right AND bottom...
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      We can combinate float and absolute: use floated span to reserve space (the bubble will be inflated if necessary) so that the absoluted span is safe to go.
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      <span class='tremendous-giant-text'>See?</span>
      <span class='inline-time'>13:56</span>
      <span class='absolute-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      Make the floated span invisible.
      <span class='inline-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      <span class='tremendous-giant-text'>See?</span>
      <span class='inline-time hidden'>13:56</span>
      <span class='absolute-time'>13:56</span>
    </span>
  </li>
  
  <li>
    <span class='speech-bubble'>
      The giant text here is to simulate images which are common in a typical chat app.
      <span class='tremendous-giant-text'>Done!</span>
      <span class='inline-time hidden'>13:56</span>
      <span class='absolute-time'>13:56</span>
    </span>
  </li>
</ul>

I tried this scenario posted earlier also;

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

The absolute positioning fixes the div to the lowest part of the browser upon loading the page, but when you scroll down if the page is longer it does not scroll with you. I changed the positioning to be relative and it works perfect. The div goes straight to the bottom upon load so you won't actually see it until you get to the bottom.

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

an alternative answer is the judicious use of tables and rowspan. by setting all table cells on the preceeding line (except the main content one) to be rowspan="2" you will always get a one cell hole at the bottom of your main table cell that you can always put valign="bottom".

You can also set its height to be the minimum you need for one line. Thus you will always get your favourite line of text at the bottom regardless of how much space the rest of the text takes up.

I tried all the div answers, I was unable to get them to do what I needed.

<table>
<tr>
   <td valign="top">
     this is just some random text
     <br> that should be a couple of lines long and
     <br> is at the top of where we need the bottom tag line
   </td>
   <td rowspan="2">
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     is really<br/>
     tall
  </td>
</tr>
<tr>
  <td valign="bottom">
      now this is the tagline we need on the bottom
  </td>
</tr>
</table>

I know that this stuff is old, but I recently ran into this problem.

use absolute position divs advice is really silly, because the whole float thing kind of loses point with absolute positions..

now, I did not find an universal solution, but in a lot of cases prople use floating divs just to display something in a row, like a series of span elements. and you can't vertically align that.

to achieve a similar effect you can do this: do not make the div float, but set it's display property to inline-block. then you can align it vertically however it pleases you. you just need to set parent's div property vertical-align to either top, bottom, middle or baseline

i hope that helps someone

I would just do a table.

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

And the CSS:

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

See it in action:
http://jsfiddle.net/mLphM/1/

I have acheived this in JQuery by putting a zero width strut element above the float right, then sizing the strut (or pipe) according to parent height minus floated child's height.

Before js kicks in I am using the position absolute approach, which works but allows text flow behind. Therefore I switch to position static to enable the strut approach. (header is the parent element, cutout is the one i want bottom right, and pipe is my strut)

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

The pipe must come 1st, then the cutout, then the text in the HTML order.

If you need relative alignment and DIV's still aren't give you what you want, just use tables and set valign = "bottom" in the cell you want the content aligned to the bottom. I know it's not a great answer to your question since DIV's are supposed to replace tables, but this is what I had to do recently with an image caption and it has worked flawlessly so far.

Oh, youngsters.... Here you are:

<div class="block">
    <a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class="r-b">A right-bottom-block with some information</span>
    </span>
    <span class="clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

No absolute position! Responsive! OldSchool

here is my solution:

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>

<div class="footer">
    <div class="bottom-element">bottom-element-in-sidebar</div>
</div>