Floating an image to the bottom right with text wrapping around

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

Solution 2:

I think the future way how to tackle this problem will be with CSS Exclusions.

CSS Exclusions extend the notion of content wrapping previously limited to floats. ... Elements layout their inline content in their content area and wrap around the exclusion areas in their associated wrapping context (--excerpts from the spec)

This msdn article also explains exclusions

...web authors can now wrap text so that it completely surrounds elements, thereby avoiding the traditional limitations of floats. Instead of limiting elements to floating either to the left or right relative to their position in the document flow, CSS Exclusions can be positioned at a specified distance from the top, bottom, left, or right sides of a containing block, while remaining part of the document flow.

Ironically, to date this only works in IE10 (look for wrap-flow:both here)

Check out this fiddle in IE10+

This is what the code looks like:

 <div class="container">
    <div class="exclusion">
        Exclusion positioned at bottom right hand side of text.
    </div>
    <div class="dummy_text">
        <p>text here</p>
    </div>
</div>

CSS

.container {
    font-size: small;
    background: aqua;
    position: relative;
}

.exclusion {

    -ms-wrap-flow: both;
    -ms-wrap-margin: 10px;
    z-index: 1;
    position:absolute;
    right:0;
    bottom:0; /* try fiddling with this. For some reason bottom: -10px (or the like) works better here */
    width: 150px;
    height: 100px;
    background: url(http://placehold.it/150x100) no-repeat;
}

So as you can see - even though the exclusion is positioned absolutely - it still acts like a float - in this case: float bottom right.

Regarding browser support:

Check out this site which shows which properties are supported by the browsers (to date: only IE10+ supports wrap-flow:both )

PS: Latest updates concerning CSS exclusions (and other simlar modules like CSS regions and CSS Shapes) can be found at the Adobe Web Platform Team Blog

Solution 3:

Possible CSS Solution: (only tested in chrome)

It looks like this might work using CSS3's flex box properties and a combination of background-image properties. I was able to get it pretty close using only CSS. (It works but needs a little tweaking) Also, this may not be ideal cause I did have to change the markup a little bit to make this work. But its probably worth a shot if you are looking for a pure CSS solution.

Here is a Demo -> http://jsfiddle.net/ADSH2/

New Markup: (not to much different)

<section >
  <h2>Some Heading:</h2>
  <p>...</p>
  <p class="last">
     <span class="image"></span>
  </p>
</section>

CSS:

.last {
    display:inline-flex;
    flex-direction:row;
}
.image {
    padding:5px 0 0 5px;
    width:100%;
    background-image:url("http://dribbble.s3.amazonaws.com/users/200359/screenshots/758731/stackoverflow_logo.png");
    background-size:100%;
    background-repeat:no-repeat;
    background-position:bottom right;
}

Resources:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://dev.w3.org/csswg/css-flexbox-1/

Solution 4:

I have worked on a jQuery-based solution — probably not as elegant as the one posted by gilly3 though ;) and it's also slower and a bit bloated...

My trick is to append two <div>s to the section, which is floated to the left and hidden width a width of 0. One of the div, a designated ghost element that will have the same dimension as the image, will be positioned below another div that is the designated height spacer. The script uses a while loop to establish if the ghost element has reached the bottom of the parent section element. If this has not happened, it will increment the height of the height spacer by 1, until the condition is satisfied.

The markup I have used is as follow. I'm using the HTML5 attribute data-bottom-image to identify sections that you have the image to be floated to the bottom. Of course it is dispensable, depending on how you want to select for the correct section element.

<section id="c1" data-bottom-image>
    <h2>...</h2>
    <p>...</p>
    <img src="http://placehold.it/250x100" />
</section>

And the jQuery script:

$(function () {
    $("section > img:last-child").each(function () {
        // Offset image based on the bottom and right padding of parent
        var $par = $(this).parent();
        $(this).css({
            bottom: $par.css('padding-bottom'),
            right: $par.css('padding-right')
        });
    });

    // Function: adjust height of height-spacer, pixel by pixel
    function adjustHeightSpacer($par, $hs, $is) {
        // Stretch height spacer
        $hs.height(0);
        $hs.css({
            height: $par.find("img").position().top - parseInt($par.css('padding-top'))
        });

        // Adjust height spacer
        while($par.height() - $is.height() > $is.position().top - parseInt($par.css('padding-top'))) {
            $hs.height("+=1");
        }

        while($par.height() - $is.height() < $is.position().top - parseInt($par.css('padding-top'))) {
            $hs.height("-=1");
        }        
    };

    $("section[data-bottom-image]").each(function() {
        // Append two spacers:
        $(this).prepend('<div class="ghost height-spacer" /><div class="ghost image-spacer" />')

        var $hs = $(this).find(".height-spacer"),
            $is = $(this).find(".image-spacer");

        // Adjust image spacer dimension
        $is.css({
            height: $(this).find("img").height(),
            width: $(this).find("img").width()
        });

        // Adjust height spacer
        adjustHeightSpacer($(this), $hs, $is);
    });

    $(window).resize($.debounce(250,function() {
        $("section[data-bottom-image]").each(function() {
            // Adjust height spacer
            adjustHeightSpacer($(this), $(this).find(".height-spacer"), $(this).find(".image-spacer"));
        });
    }));
});

And here is the working Fiddle: http://jsfiddle.net/teddyrised/xmkAP/5/