Columns and Inline Center Image

Question

I would like to create a 2 text column with a div in the center like below.

I am using this code:

-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;

When I place another div within the div class, it formats to go into two columns. How do I fix this?

Answer 1

Use these following CSS:

 <style type="text/css">
  .container{ background:#00FF00;width: 844px;text-align:center; margin: 0px auto;border: 1px solid #CCCCCC;height: 450px;}
  .columns {background:#FF0000; width: 400px;border: 1px solid #595959; height: 450px;text-align:left;float:left; padding: 10px;left:5%;}
  .popup_middle_content{background:#FFFFFF; border: solid 1px black; position: absolute; left: 50%; top: 50%;background-color: white;z-index: 1; height: 50px; margin-top: -150px; width: 200px;margin-left: -100px; }
</style>

And check with these below divs:

  <div class="container">
       <div  class="columns">Left Paragraph contents...</div>
       <div  class="columns">Right Paragraph contents...</div>
       <div  class="popup_middle_content">CENTER DIV content...</div>
  </div>

It is works for me. I hope this helps to you.

Answer 2

Answering this to your request of keeping css columns.

Picked up the idea from here: http://css-tricks.com/float-center/ as per @Josh's suggestion.

See this updated fiddle of yours: http://jsfiddle.net/aX47K/99/

The trick is to use css :before or :after pseudo elements on each column (represented by divs), with fixed width and height and floated opposite. This will create a dummy space which we can then fill with our image (or another div) using absolute positioning.

/* the overall wrapping div acting as newspaper */
div.paper { position:relative; }

/* the div holding the columns */
div.wrap {
    column-count:2;
    text-align: justify;
}

/* the dummy space created from individual divs holding the content */
#col-1:before, #col-2:before { 
  content: ""; 
  width: 140px; 
  height: 160px; 
}
#col-1:before { 
  float: right; 
}
#col-2:before { 
  float: left; 
}

/* the image will then be placed in the dummy space created above */
img {
    width: 240px;
    position:absolute;
    top: 10%; left: 33%;
}

However, please note that this approach is still a hack.