Two css3 columns text with an image in middle

css, html

Solution

Here you are: http://jsfiddle.net/aX47K/

css:

.column{  
   width:300px;  
   float:left;  
   margin-right:20px;  
} 

.column div{  
  width:200px;  
  height:210px;  
}

#col-1 div{
  float:right;
}
#col-2 div{
 float:left;
} 

img#center-image{  
  position:absolute;  
  left:110px;
}

Problem

I'd like to achieve this result there are many tutorial around like this but they work with a fixed text and columns. I print a variable-length text inside my two column layout in this way ``` #cols { column-count: 2; column-gap: 20px; } ``` ``` <div id="box"> <p id="cols"> Lorem Ipsum.... </p> </div> ``` so I can't use a technique like that, how can I put an image in the middle in this scenario?

Original source