How to make a div float on a columnized text

Question

A picture to show you the matter :

I want the columnized p to behave like the uncolumnized one and it's text to shape around the div.

Here the html :

<div>hey, I should float !</div>
<p>Velit porttitor mattis nisi sit magnis nec et nunc pellentesque! Pulvinar est! Nunc massa, dapibus eu etiam ut? Enim eu vut porta scelerisque auctor auctor, integer. Natoque elit? Vel elit nunc nunc? Rhoncus platea tortor, et, velit integer dis, etiam elementum cursus? Ac cum scelerisque! Sit est turpis duis pid scelerisque eu nec lectus. Nascetur mattis.<p>
<hr>
<div>hey, I should float !</div>
<p>Velit porttitor mattis nisi sit magnis nec et nunc pellentesque! Pulvinar est! Nunc massa, dapibus eu etiam ut? Enim eu vut porta scelerisque auctor auctor, integer. Natoque elit? Vel elit nunc nunc? Rhoncus platea tortor, et, velit integer dis, etiam elementum cursus? Ac cum scelerisque! Sit est turpis duis pid scelerisque eu nec lectus. Nascetur mattis.<p>

And here's the CSS :

p:first-of-type{-moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px;}
p{text-align: justify;}
div{background: #c00;  height: 20px; width: 150px; float: right; margin: 10px; padding: 10px;}​

What's happening to my floating div :'(

Here's a jsFiddle of it : http://jsfiddle.net/mmYQQ/

Answer 1

Remove

p:first-of-type{-moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px;}

from css