Плавающие изображения вокруг текста в contenteditable div

Question

У меня возникли проблемы с корректным размещением изображений рядом с текстом в contenteditable div. Вот скрипка, которая показывает проблему: http://jsfiddle.net/trpeters1/tcLw2/10/

Не возражает ли кто-нибудь взглянуть на скрипку, чтобы дать несколько советов о том, как отображать текст рядом с изображением?

вот HTML и CSS, если вы хотите скопировать вставить:

<p contenteditable="true" id="local"  >
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg"> sdfasfsfasfsfdasfsafasfajksf;asjf;as;jkasfk;as;lkfjaskfjkaslfjkasfkafl;sfklfjas;fjasjdfkasfkasfl;als;fjasf;slfjasfasfsadfasfasfafasfasfafsfddas

CSS:

p{background:yellow;}
img{float:left;}

Answer 1

Пожалуйста, смотрите комментарии Prajeesh.Он отвечает на этот вопрос: «Я только что увидел, что предоставление пробелов в вашем длинном тексте в оригинальной скрипке фактически оборачивает его так, как вам нужно :) Только ваша строка была настолько длинной, что ее нельзя было поставить рядом с изображением»