Floating an image to the bottom right with text wrapping around

Question

I have a text container with paragraphs and headings. At the bottom of the page I want to float an image to the right of the page, while the text wraps around the image. The bottom of the image should be flush with the bottom of the last paragraph.

The page width is variable (responsive), but the image dimensions are fixed. Is it possible to accomplish this in HTML and CSS (CSS3 is fine)? If not, can it be done with a minimal amount of Javascript?

Here's a schematic example of what I want to accomplish:

The HTML currently looks something like this, but it can be changed if necessary. I don't particularly care where in the document the image is located. Using background images instead would be fine too.

<section>   <h2>...</h2>   <p>... ...</p>   <p>... ...</p>   ...   <img src="..."> </section> 

When I set float: right on the image, it floats to the right but I cannot get it to align to the bottom of the page. Suggestions?

Edit: the closest I got is this... :-)

Answer 1

Create a spacer element with float: right and height equal to the height of the content minus the height of the image. Then use float: right and clear: right on the image:

<div class="spacer"></div> <img class="bottomRight" src="" /> <div class="content"></div> 

.spacer {     height: calc(100% - 200px);     width: 0px;     float: right; } .bottomRight {     height: 200px;     float: right;     clear: right; } 

http://cssdesk.com/bLNWs

My demo uses fixed dimensions in the container element. Since that is rarely a realistic case, it probably makes more sense to use JavaScript to size the spacer. Call this function, passing a reference to the spacer element when the document is ready and during the window.onresize event.

function sizeSpacer(spacer) {     spacer.style.height = 0;     var container = spacer.parentNode;     var img = spacer.nextElementSibling || spacer.nextSibling;     var lastContentNode = container.children[container.children.length - 1];     var h = Math.max(0, container.clientHeight - img.clientHeight);     spacer.style.height = h + "px";     while (h > 0 && img.getBoundingClientRect().bottom > lastContentNode.getBoundingClientRect().bottom) {         spacer.style.height = --h + "px";     }     if (lastContentNode.getBoundingClientRect().bottom > img.getBoundingClientRect().bottom) {         spacer.style.height = ++h + "px";     } } 

This function works (see the demo), and can be reworked for jQuery or your library of choice. It's not meant to be plug-in quality code, but serves to illustrate the concept.

jsfiddle.net/gilly3/xLr7eacp

Edit: I created a jQuery plugin version (github | jsFiddle demo) that supports floating bottom left or bottom right. It also supports specifying which element to align the bottom with.

_{By the way, I didn't bother trying to support IE7.}