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

Question

Every time I try to do something seemingly-simple in CSS, it doesn\'t work.

I have a content div that contains a 460x160 image. All I want to do is position the imag

Answer 1

Well... this is a pretty old post but I struggled and got away with this with a small workaround. I needed to have an image aligned to the right, and exactly 170px from the top. And need text to flow on top, left and bottom of image. So what I did is create a that is of 0px width, with 170px of height and float right. Then the img would float and clear right and voila!

<!-- I used CSS, but inline will serve well here -->
<div style="float: right; width: 0px; height: 170px"></div>
<div style="float: right; clear: right"><img src="..." /></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 text text text text text
text text text text text text

Worked pretty well :)

Answer 2

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.

Answer 3

The simplest solution i found is to wrap img inside a div element and then use padding-top and margin-bottom values to align it.

This is my CSS

.contentDiv  .bottomRight img{
  height: 130px;
  float:right;
  padding-top: 60px;
  margin-bottom: -10px;
  }

and here is the HTML

<div class="contentDiv">
 <h1>If you are seeing this and reading it, then all is working well.</h1>
 <div class="bottomRight">
    <img class="bottomRight" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
 </div>
</div>

The reason padding and margin worked for me is because I use it inside the parent element "contentDiv" to auto adjust height of the div according to the content. Not sure if its of any use.

Answer 4

Further to the solution posted, I've used a quick JQuery hack to dynamically adjust the height of the pusher, by taking the height of the area I wanted to bottom-right align away from the height of the content area, and applying it to the pusher div, as so:

$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + 'px')

It needs a few slight tweaks, but generally works as well as you're going to get!

Answer 5

For a jQuery solution, try the lowFloat plugin created by gilly3: https://github.com/gilly3/lowFloat

Answer 6

The solution I found involves that you have a div whose width does not changes, nor does the amount of text. Then you can position the image inside the text and have it align=right. So if you have correct amount of text around it, then you you get the image on the right and at the bottom of the div.

    <style >
#contents{
    border: 2px solid red;
    background: #ffffd;
    position: absolute;
    width:600px;
}



</style>
<div id="contents">
    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 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 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 ...    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 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 ...  <img src="http://daiphyer.com/images/daiphyerv6-sliced_02.png" ALIGN="RIGHT"/>
    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 text text ...    text text text text text text ...    text text text text text text ...
     hey hey 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>