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

Answer 1

Set the parent div's "position: relative", then the inner div do "position: absolute; bottom: 0;" and there you go :)

Answer 2

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

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 5

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 6

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 7

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

<style type="text/css">
#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; }
</style>

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

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 9

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 10

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 11

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