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

Question

I have floated images and inset boxes at the top of a container using float:right (or left) many times. Now, I need to float a div to 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.

Answer 1

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

position: absolute; 
bottom: 0;

...and there you go :)

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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%;
}

Answer 6

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;

Answer 7

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

#outer {
  width:10em;
  height:10em;
  background-color:blue;
  position:relative; 
}

#inner {
  position:absolute;
  bottom:0;
  background-color:white; 
}

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

Answer 8

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>

Answer 9

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 {
  display: flex;
  /* Material design shadow */
  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);
  height: 100px;
  width: 175px;
  padding: 10px;
  background: #fff;
  font-family: Roboto;
}
.bottom {
  align-self: flex-end;
}

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

Answer 10

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

Answer 11

If you want the text to wrap nicely:-

.outer {
  display: table;
}

.inner {
  height: 200px;
  display: table-cell;
  vertical-align: bottom;
}

/* Just for styling */
.inner {
  background: #eee;
  padding: 0 20px;
}

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

Answer 12

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 {
  display: flex;
  height: 100px;
  border: solid 1px #0f0f0f;
}
.child {
  margin-top: auto;
  border: solid 1px #000;
  width: 40px;
  word-break: break-all;
}

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

Answer 13

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

Answer 14

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/

Answer 15

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>

Answer 16

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/

Answer 17

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

Answer 18

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>

Answer 19

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>

Answer 20

Here is the right solution:

.toBottomRight
{
  display:inline-block;
  position:fixed;
  left:100%;
  top:100%;
  transform: translate(-100%, -100%);
  white-space:nowrap;
  background:red;
}

<div class="toBottomRight">Bottom-Right</div>

jsfiddle: https://jsfiddle.net/NickU/2k85qzxv/9/

Answer 21

Currently this is not possible. There are different approaches to solve aligning content to the bottom edge (flex, grid, table, absolute). However these approaches don't respect float and thus the content does not flow around these elements.

Someday floating elements could be possible with css if browsers and the csswg agrees on a definition.

Advanced resources:

https://drafts.csswg.org/css-page-floats/#float-property

https://github.com/w3c/csswg-drafts/issues/1251

Answer 22

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.

Answer 23

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; }
}

Answer 24

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>

Answer 25

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.

Answer 26

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;
}

Answer 27

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>

Answer 28

With some JavaScript I managed to pin a floated element to the bottom of its container - and still have it floated in the text, which is very useful for things like shape-outside.

The floated element gets a margin-top assigned that is equal to its container, its own height subtracted. This preserves the float, pushes the element to the bottom edge of its container and prevents text flowing below the element.

const resizeObserver = new ResizeObserver(entries => {
  if(entries.length == 0) return;
  const entry = entries[0];
  if(!entry.contentRect) return;

  const containerHeight = entry.contentRect.height;
  const imgHeight = imgElem.height;
  const imgOffset = containerHeight - imgHeight;
  
  imgElem.style.marginTop = imgOffset + 'px';
});

const imgElem = document.querySelector('.image');
resizeObserver.observe(imgElem.parentElement);

Working example: https://codepen.io/strarsis/pen/QWGXGVy

Thanks to ResizeObserver and widespread support for JavaScript this seems to be a very reliable solution.

Answer 29

Try this CSS+Javascript solution. Start with a top right floating div. Then calculate the height for a zero-width div along the right edge to push your floating div to the bottom. This code may need some tweaking to get the right height.

<style>
  #mainbox {border:4px solid red;width:500px;padding:10px;}
  .rightpad {float:right;clear:right;padding:0;width:0;}
  #floater {background-color:red;text-align:center;color:#FFF;width:300px;height:100px;float:right;margin-right:-10px;margin-top:10px;}
</style>
<script>
window.onload = function() {
  var mmheight = document.getElementById("mainbox").clientHeight;
  var ff = document.getElementById("floater");
  var ffheight = ff.clientHeight;
  var dd = document.createElement('div');
  dd.className = "rightpad";
  dd.style.height = (mmheight - ffheight - 20) * 1 + "px";
  ff.parentNode.insertBefore(dd,ff);
}
</script>
<div id="mainbox">
  <div id="floater" class="rightpad">123</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere tellus et dolor vestibulum gravida. Donec vel nunc massa. Quisque quis varius libero. Fusce ut elementum magna. Praesent hendrerit diam sed velit rutrum mollis. Nunc pretium metus in tempus tempus. Quisque laoreet nibh eget volutpat dictum. Pellentesque libero ipsum, tristique et aliquam aliquam, accumsan sed sem. Phasellus facilisis sem eget mi tempus rhoncus.</p></div>

Answer 30

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.

Answer 31

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.

Answer 32

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.

Answer 33

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

Answer 34

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>

Answer 35

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>

Answer 36

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;
}

Answer 37

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

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