Floating text around a video


I have been trying to float text around a video that I have embedded into a web page.

The code looks like this:

<p><span style="padding-right: 5px; float: left"><script src="http://i.cdn.turner.com/cnn/.element/js/2.0/video/evp/module.js?loc=dom&vid=/video/showbiz/2009/07/10/.cnn" type="text/javascript"></script></span>
<span style="font-size: 16px; text-align: justify">This text should wrap around on the right side of the video and be justified.</span></p>

I can easily float an image to the left and have text wrap around on the right, so I assumed that doing a video would be the same.

In both FF and IE the text is dropping below the video. What am I doing wrong?


The text isn’t dropping down in any of my browsers (IE or Firefox). It wraps to the right as expected.We may need to see a link to the page to see what’s happening.

It won’t be justified though as you can’t apply justify to an inline element because it has no width. Apply the justify to the parent p element instead.

Hi Paul–

Thanks for the feedback.

That’s weird that it’s wrapping around on your browsers. It won’t do it on my and my clients.

You can view the page in question here:
family first intervention dot com

I’ve attached a screenshot.


Hi, I don’t think it’s possible with your current setup to have it work, I can get the text wrapping but I floated every single element inside the video span (and then the adjacent span with text should wrap) but it didn’t.

If you could get rid of hte iframe and just place regular <embed> or whatever you are using then this could be easily done. I might be missing something though :).

It seems to be something to do with the width that you are setting in the middle. It’s just not big enough or is shrink wrapping in some way.

Increasing the width here allows the text to wrap but then the middle is too wide.

#middle-expand {
    width: 216&#37;;

You seem to have multiple nestings with many negative margins shifting the content backwards and forwards and I don’t think the browsers knows which way is up :slight_smile:

It would take some considerable time to debug properly but removing sections of css show that the item in question will wrap if it has room to do so.

lol - Found it :slight_smile:

The problem is simply that you have placed a string of unbroken text after the floated video using non breaking psaces and it is therefore just too wide to float next to the video.

Just introduce some real space between the first few words and don’t use the character “&#160” which is a non breaking space.


Intervention  involves  the  family  agreeing on, and delivering a solution decided on as a team.