Заставить блок-элемент вставлять себя между текстом

Question

Я хочу эту разметку

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

И я хочу, чтобы это отображалось так:

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

Причина в том, что я хочу, чтобы текст страницы (в тегах <p>) редактировался в одном редакторе richtext, а затем содержимое в теге <div> редактировалось в отдельном разделе, но содержимое тег <div> будет по-прежнему центрирован в содержимом страницы.

В настоящее время я думаю о том, чтобы сделать это в PHP, где я просто explode() это разделю на предложения, а затем выведу первые несколько предложений до div и остальные предложения после div. Но я надеялся, что будет какой-то "float" - подобный трюк css для этой проблемы.

Для справки о том, что я действительно хочу сделать, пожалуйста, посмотрите на этот сайт:

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

Answer 1

Вы можете сделать это с некоторыми 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/

Answer 2

Вы можете сделать свой div встроенным вместо блока:

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

Таким образом, он будет действовать как <span>, но все равно будет div.