Can you float a div in the lower right of its parent div and have text wrap around it?

Question

I would think this would be a common issue, but my search for a solution leads me to believe it may not be possible. I simply want to place a div in the lower right corner of its parent div, yet have the text in the parent div flow around it.

Although I've found many posts addressing this question, I have not found one that appears to work. Most of these posts were several years old, which gives me a sliver of hope that there may be a way to do it after all with HTML 5?

I should have mentioned that this is in pursuit of a responsive design, so a static solution will not work.

Here's what I'm attempting to do: http://test.scoe.net/rfox/usalResponsive6/indexTeacher.html

I have a background image in the lower right of the div. I would like the text within this div to not flow across the image, but around it instead. I thought I'd be able to place an empty div (represented by the purple rectangle in the referenced page) in the lower corner to prevent text from flowing across the background image, but I can't seem to find a way to accomplish this.

Answer 1

Didn't see a demo there - or anyone doing it with a pseudo element (which would be a bit more semantically correct because it's styling and not content) so let me just post that then :

Demo

<div id="parent">
  <div></div>
  <span>text</span>
</div>

#parent:before {
  content: '';
  height: 35%;
  float: right;
}

#parent div {
  width: 130px;
  height: 65%;
  float: right;
  clear: right;
}

When it comes to responsiveness in this particular case there are two aspects. First would be the background but since that isn't responsive itself for the most part and positioned at the bottom right, some width and height may have to be set along with the break points in the media queries.

Another form of responsiveness, automatic adjustment to the amount of text, is a tricky one that doesn't seem to be solvable without JavaScript. When height is left to auto, the floated elements will not inherit any height. This causes for the effect to not render. And because children cannot refer up the tree to relate to their parent's unknown height there isn't a pure CSS approach available.

So the example still has a fixed height and a minor bit of JS that's commented out but which should come close to making it adapt. It's a workaround but it's all current browser support will allow.

---

And now what can be used in the future!

Caniuse

The image itself could be cropped and saved as png, leaving transparent space around it. Then we can apply shape-outside and shape-image-threshold rules to it. With the current spec any text will then wrap when it's floated. Browser support it still limited at this point but it's very promising. The great thing I noticed about it is that when the floated element is given top margin, the text will start to flow above it! This does not occur in the example at the top of this post, it will only make the block appear longer (and empty as well). Because of this, a minimal bit of vanilla JS can make it fully responsive by only setting margin and without using an additional pusher element :

Example

<img id="image" src="image.png" alt="">

#image {
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: right;
}

window.onload = placeBottom;
window.onresize = placeBottom;

function placeBottom() {
var parent = document.getElementById('parent'),
image = document.getElementById('image');
image.style.marginTop = 0;
var space = parent.clientHeight-image.clientHeight;
image.style.marginTop = space + 'px';
}

It's actually very straightforward :

http://www.html5rocks.com/en/tutorials/shapes/getting-started/

Credit for the latter part to Paulie_D for putting me on the track of CSS shapes and later recognising that images used in this way are subject to same domain policy. Meaning they have to be hosted by the site itself or when linked externally, CORS restrictions will need to be relaxed.