Wrapping text around an absolute positioned element

Question

I'm stuck on something where I have a loads of content pages with a message box. In this message box, you could have images, text, headers etc. However each message box will have an Icon in the top right of the box. The image will sit in the top of the box fine if i use position:absolute. However If the message box has a header or a paragraph and fills with the width of the box. The text will sit underneath the image.

I basically need a wrapper around the image which has a width so the text will only go sit up until the edge of the image. I'm 99% sure i got it working in firebug by wrapping the absolute positioned image in a div and giving it some styles. But I can't seem to get it working today!

There are hundreds of pages, so moving the HTML around is not an option. The image doesn't currently have a wrapper. So i'm having to use Jquery to wrap the image. (That's if it's the answer).

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

Anyway here is my code so far:

<div class="message">
<h3>Some text, a header perhaps? But this is the next that will sit under the image, sometimes it's a p 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>

The JS wraps a div around the 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/

Won't work in older browsers that don't support generated content, so mainly older IE. For those a padding-right for the container could be used as fallback.

Answer 2

Well, perhaps is a very quickie-patchy solution, but how about set a padding-right to ".message" as this?

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

Working fiddle

Answer 3

jsFiddle Demo

What I would suggest doing is calculating the width of the text message, calculating the width of the icon, setting the width of the text message to the percent remaining if the icon's width were removed from the text message width.

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+"%");