CODEWITHSUNDEEP
htmlcsscss-float
Stephen Martin
Stephen Martin

Reputation: 9645

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

Upvotes: 319

Views: 643325

Answers (30)

Manuel Meister
Manuel Meister

Reputation: 503

Image floated to the bottom of a paragraph

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

Upvotes: 4

Mykola Uspalenko
Mykola Uspalenko

Reputation: 104

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/

Upvotes: 1

PRConnect
PRConnect

Reputation: 131

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>

Upvotes: 0

strarsis
strarsis

Reputation: 516

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.

Upvotes: 0

Mirajul Momin
Mirajul Momin

Reputation: 177

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>

Upvotes: 0

Zhiyong
Zhiyong

Reputation: 736

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>

Upvotes: 2

Vsevolod Azovsky
Vsevolod Azovsky

Reputation: 115

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

Upvotes: -2

rashedcs
rashedcs

Reputation: 3725

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>

Upvotes: 1

olliew
olliew

Reputation: 183

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

Upvotes: -3

Ben
Ben

Reputation: 59

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

Upvotes: 4

Filipe Pitacho
Filipe Pitacho

Reputation: 59

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>

Upvotes: 5

countersweet
countersweet

Reputation: 31

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

Upvotes: 2

RedGen
RedGen

Reputation: 11

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

Upvotes: 1

Tushar Bohra
Tushar Bohra

Reputation: 41

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>

Upvotes: 2

m4n0
m4n0

Reputation: 32255

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>

Upvotes: 6

Jeff
Jeff

Reputation: 5

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.

Upvotes: -2

Celmaun
Celmaun

Reputation: 24752

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>

Upvotes: 3

Thomas
Thomas

Reputation: 34188

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>

Upvotes: 0

chilicoder
chilicoder

Reputation: 279

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/

Upvotes: 1

Kin
Kin

Reputation: 21

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>

Upvotes: 1

Barney Szabolcs
Barney Szabolcs

Reputation: 12514

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/

Upvotes: 1

Timothy Khouri
Timothy Khouri

Reputation: 31845

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

position: absolute; 
bottom: 0;

...and there you go :)

Upvotes: 334

William Kinaan
William Kinaan

Reputation: 28799

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

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

Upvotes: -5

Yona
Yona

Reputation: 9682

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;

Upvotes: 11

James L
James L

Reputation: 237

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

Upvotes: 14

Tom Groentjes
Tom Groentjes

Reputation: 1103

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.

Upvotes: 82

sherlock42
sherlock42

Reputation: 146

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

Upvotes: 0

Stu
Stu

Reputation: 169

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.

Upvotes: 16

drfu
drfu

Reputation: 1

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>

Upvotes: -2

Dave Kok
Dave Kok

Reputation: 912

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.

Upvotes: 1

Related Questions