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.

Answer 3

Try creating separate Div classes for everything and position your div class for the div the place you wanted. Don't create Div tags , just create classes !

Answer 4

You need to create a separate class for

Just check below example

<div class="newspaper">enter code here
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod     tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis     nostrud exerci tation ullamcorper suscipit lo`enter code here`bortis nisl ut aliquip ex ea     commodo consequat. Duis autem vel eum iriure dolor in 
</div>
<div class="newspaper"> 
Typi non habent claritatem insitam; est usus legentis in iis     qui facit eorum     claritatem. 
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
<div class="">
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.  
 Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</div>

Answer 5

I imagine you are long done with this but I have an example here which might prove to be useful. There is a bit of nuance here which I don't want to explain unless someone asks. I think with a touch of jQuery we could nail it down.

Here is my Fiddle Example. It is responsive as well so you can expand the window to see that. Again it is kinda quickly done. If you choose a responsive container just look for the subtle breakpoints.

img {
width:auto;
height:5em;
}

#right img {
    padding:1.5em 1.5em 1em 0;   
}

#left img {
    padding:1.5em 0 1em 1.5em ; 
}

#right {
    float:left;
    margin-left:-5.5em;
}

#left {
   float:right; 
margin-right:-5.5em;
}

Fiddle