How to Wrap Text Around a Bottom-Right Div

How can I wrap text around a bottom-right div?

It sure seems to have been asked before (2003), and before (2002), or before (2005)

The last link actually suggest a javascript-based solution, but for a fixed (i.e. non fluid) solution.

It is consistent however, with other advices found

The only way to do that is to put the floated element somewhere in the middle of the text. It's impossible to get it perfect all of the time.

Or this one:

It consists of floating a vertical "pusher" element (such as img, but it's probably smarter to just use an empty div), then floating the desired object under it, using the clear property. The major problem with this method is you still have to know how many lines there are of text. It makes things MUCH easier though, and could definitely be coded with javascript, just need to change the height of the "pusher" to the height of the container minus the height of the float (assuming your container isn't fixed/min height).

Anyway, as discussed in this thread, there is no easy solution...

Cletus mentions in the comments this thread from 2003, which states once again the fact it can not easily be achieved.

However, it does refer to this Eric Meyer's article, which comes close to the effect you want to achieve.

By understanding how floats and the normal flow relate to each other, and understanding how clearing can be used to manipulate the normal flow around floats, authors can employ floats as a very powerful layout tool.

Because floats were not originally intended to be used for layout, some hacks may be necessary to make them behave as intended. This can involve floating elements that contain floats, "clearing" elements, or a combination of both.

Yet, Chadwick Meyer suggests in his answer a solution based on the :before CSS selector (variation of Leonard's answer).

It does work here.

Update Apr. 2021: Temani Afif suggests in his answer using exbox combined with a shape-outside.

But do check out the Backwards Compatibility of Flexbox, even though its support by all browsers is quite good.

Wrap text around bottom left div?

Just add float: left;position: relative; to your element and add a spacer element like seen in the code below.

.bg {  width: 310px;  height: 200px;  background-color: #FCF2FF;  position: relative;  font-family: tahoma, arial;  font-size: 11px;  color: #772D99;}.title {  position: absolute;  left: 10px;  top: 5px;  text-align: left;  font-weight: bold;  font-size: 23px;  font-variant: small-caps;}.desc {  position: relative;  top: 35px;  left: 0px;  width: 115px;  height: 165px;  border: 1px dotted #B07ACC;  background-color: #FCF2FF;  padding: 3px;  box-sizing: border-box;}.pkmn {  margin-left: -3px;  margin-right: 3px;  padding: 3px;  width: 32px;  height: 32px;  border: 1px dotted #B07ACC;  border-radius: 100%;  background-color: #FCF2FF;}

<div class="bg">  <div class="title">Title Here</div>  <div class="desc">    <!-- I used CSS, but inline will serve well here -->    <div style="float: left; width: 0px; height: 120px"></div>    <div style="float: left; clear: left">      <img src="https://pfq-static.com/img/pkmn/q/4/r/8.png/t=1482399842" class="pkmn"/>    </div>    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div></div>

Floating an image to the bottom right with text wrapping around

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

Text wrapping around a div

You just need to work with float property.

HTML:

<div>
    <img src="http://www.igta5.com/images/trailer-2-gtav-logo.jpg" alt="GTA V" />
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>

CSS:

div img {
    width: 240px;
    float: right;
    padding: 25px;
}

Play with this on jsFiddle.

Update

With pure CSS, the most that you will get is manually spacing the sides of image with absolute positioning.

The HTML:

<div class="left">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="right">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<img src="http://www.igta5.com/images/trailer-2-gtav-logo.jpg" style="width: 240px; height: 140px;">

The CSS:

img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -125px;
    margin-top: 60px;
}

.left, .right {
    width: 49%;
}

.left {
    float: left;
}
.right  {
    float: right;
}

.left:before, .right:before {
    content: "";
    width: 125px;
    height: 200px;
}

.left:before {
    float: right;
}

.right:before {
    float: left;
}

Play with this on jsFiddle.

More information

You can find more information in this topic, on StackOverflow.

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

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="Sample Image">

#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.