Here is my solution using a wrapper for the left and right div, which have a width of 50% and contain other divs with margins of half the image's width. The image itself is positioned in the wrapper using absolute positioning.
HTML
<div class="wrapper">
<div class="left"><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div></div>
<div class="right"><div>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div></div>
<img src="your_image.png" alt="" />
</div>
CSS
.wrapper {
position: relative;
overflow: hidden;
height: auto; /* match the height of the floating divs */
}
.wrapper > div > div {
min-height: 100px; /* at least as high as the image */
}
.wrapper > .left {
float: left;
width: 50%;
}
.wrapper > .left > div {
margin-right: 50px;
background: blue;
}
.wrapper > .right {
float: right;
width: 50%;
}
.wrapper > .right > div {
margin-left: 50px;
background: red;
}
.wrapper > img {
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 50%;
margin-left: -50px;
}
Here is a JSFiddle: http://jsfiddle.net/j84LB/