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

Asked 2008-11-23T01:29:04.243

320

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.

html css css-float

Edit Report

3 Answers

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;

answered 2008-11-23T01:59:51.653

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.

answered 2012-02-02T15:15:28.833

-2

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>

answered 2012-01-02T21:24:38.460

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

3 Answers

Your Answer