Wrap text around an absolute position element

Question

I am stuck on something where I have many pages of content with a message field. In this message box, you can have images, text, headers, etc. However, each message window will have an icon in the upper right corner of the window. The image will sit at the top of the window if I use the position: absolute. However, if the message field has a heading or paragraph and is filled with the width of the field. The text will sit under the image.

I basically need a wrapper around the image with a width, so the text will only sit to the edge of the image. I'm 99% sure that this works for me in firebug, wrapping the absolute positional image in a div and giving it some styles. But I can’t get it to work today!

There are hundreds of pages, so moving HTML around is not an option. There is currently no wrapper in the image. So I need to use jQuery to wrap the image. (If this is the answer).

I know that an absolute position takes an element outside the document stream, but is there something I can do?

Anyway, here is my code:

<div class="message"> <h3>Some text, a header perhaps? But this is the next that will sit under the image, sometimes it ap tag.</h3> <img class="messageIcon" src="/link-to-icon/which-are-the-same-size" border="0" width="64" > <p>Some more random text that would appear in the messagebox this could go on for a few lines.</p> </div> <script type="text/javascript"> $(document).ready(function(){ $('img.messageIcon').wrap('<div class="messageIconWrap" />'); alert("this is a test"); }); </script> 

JS wraps div around image

CSS

 .messageIconWrap{ display: inline-block; float:right; height:60px; width:60px; } div.message { position: relative; } .message { background: none repeat scroll 0 0 #393939; clear: both; } .messageIcon { position: absolute; right: 20px; top: 20px; float: right; } 

JS Fiddle - http://jsfiddle.net/jdp7E/

Answer 1

Pure CSS solution: add a pseudo-element at the beginning of the container with

 div.message:before { content:" "; float:right; width:75px; height:75px; } 

http://jsfiddle.net/jdp7E/1/

Will not work in older browsers that do not support the generated content, so basically the older IE. For those who are suitable for the container, it can be used as a reserve.

Answer 2

Well, maybe this is a very quick solution, but what about setting padding-right to ".message" like this?

 div.message { position: relative; padding-right:80px; /* - You can set a padding higher or equal than the image - */ } 

Working violin

Answer 3

jsFiddle Demo

I would suggest doing a calculation of the width of the text message, calculating the width of the icon, setting the width of the text message to the percentage remaining if the width of the icon was removed from the width of the text message.

 var mw = $('.message:first-child').width(); var iw = $('.messageIcon').width() + 20;//20 is for padding var percent = parseInt((mw - iw) / mw * 100); $('.message :first-child').width(percent+"%");