Make block element insert itself between text

I want to have this markup

<p> Content 1 </p>
<p> Content 2 </p>
<div> Div 1 </div>

And I want it to display like this:

<p> Content 1 </p>
<div> Div 1 </div>
<p> Content 2 </p>

The reason for this is that I want the text for the page (those in <p> tags) be edited in one richtext editor and then the contents in the <div> tag be edited in a separate section but the contents of the <div> tag will still be centered within the content of the page.

I am currently thinking of doing this in PHP where I will simply explode() it, splitting it by sentences and then displaying the first few sentences before the div and the remaining sentence开发者_运维知识库s after the div. But I was hoping that there would be some "float"-like css trick to this problem.

For reference of what I really want to do, please take a look at this site:

http://katron.sourcefit.com/static/a&a/about-us.html

---

You can make your div inline instead of block:

<div style="display: inline;"></div>

That way it will act like a <span> but still be a div.

---

You can do this with some absolute positioning.

<p id="Content1"> Content 1 </p>
<p id="Content2"> Content 2 </p>
<div id="Div1"> Div 1 </div>

CSS

#Content1{
    position:absolute;
    top:0;
    width:200px;
    height:50px;
    background:pink;
}

#Content2{
    position:absolute;
    top:120px;
    width:200px;
    height:50px;
    background:red;
}

#Div1{
    position:absolute;
    top:60px;    
    width:200px;
    height:50px;
    background:green;
}

http://jsfiddle.net/jasongennaro/bQLuH/