StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Create a spacer element with <code>float: right</code> and <code>height</code> equal to the height of the content minus the height of the image. Then use <code>float: right</code> and <code>clear: right</code> on the image:</p> <pre><code><div class="spacer"></div> <img class="bottomRight" src="" /> <div class="content"></div> </code></pre> <pre class="lang-css prettyprint-override"><code>.spacer { height: calc(100% - 200px); width: 0px; float: right; } .bottomRight { height: 200px; float: right; clear: right; } </code></pre> <p><a href="http://cssdesk.com/bLNWs" rel="nofollow noreferrer">http://cssdesk.com/bLNWs</a></p> <p>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 <code>window.onresize</code> event.</p> <pre><code>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"; } } </code></pre> <p>This function works (<a href="http://jsfiddle.net/n5RPV/9/" rel="nofollow noreferrer">see the demo</a>), 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.</p> <p><a href="http://jsfiddle.net/n5RPV/9/" rel="nofollow noreferrer">jsfiddle.net/n5RPV/9</a></p> <p><strong>Edit:</strong> I created a jQuery plugin version (<a href="https://github.com/gilly3/lowFloat" rel="nofollow noreferrer"><strong>github</strong></a> | <a href="http://jsfiddle.net/n5RPV/10/" rel="nofollow noreferrer"><strong>jsFiddle demo</strong></a>) that supports floating bottom left <em>or</em> bottom right. It also supports specifying which element to align the bottom with.</p> <p><sub>By the way, I didn't bother trying to support IE7.</sub></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload