Paragraph alignment in two divs with an image between them - html

Question

how can i align my paragraph as shown in the following image
.
I need to show a newspaper kind of thing in which this should be included.
The following is the html code i'm using
<div class="left"></div>
<div class="right"></div>
<div class="myImage"><img src="question.png"/></div>
and the css code is this
*{
margin:0;
padding:0;
}
.right,.left{
height:300px;
width:200px;
float:left;
background:red;
margin:5px;
}
.myImage img{
width:100px;
height:100px;
}
.myImage{
clear:both;
position:absolute;
top:100px;
left:150px;
}

Answer 1

Create the image element on the left side, floating to the right of the text. Misplace it to the right, half the image's width with "margin". Then, on the right div, create the same effect using a blank div, but inverted. Float the div to the left side of the text and misplace it to the left by half the width. Like this:
<style>
.right, .left
{
width: 200px;
height: 300px;
float:left;
}
#real-img
{
width: 100px;
height: 100px;
float: right;
margin-right: -50px; /* half the width */
margin-top: 125px; /* vertical align considering page height minus img half height */
}
#fake-img
{
width:100px;
height:100px;
float:left;
margin-left: -50px;
margin-top: 125px;
}
</style>
And the html:
<div class="left">
<img src="imgurl" id="real-img" />
[CONTENT_TEXT]
</div>
<div class="right">
<div id="fake-img"></div>
[CONTENT_TEXT]
</div>
All of this, of course, considering you hard-code all the sizes.