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

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

position: absolute;  bottom: 0; 

...and there you go :)

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.

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.

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.

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