Two css3 column text with image in the middle

Question

I would like to achieve this result

There are many tutorials on how to do this , but they work with fixed text and columns. Thus, I print variable-length text inside two column layouts.

#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 this, how can I put the image in the middle in this scenario?

Answer 1

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; }