Question

I have some text and columnizer sorts it into 3 columns.

<div id="press">
  <div class="wide">
  Placeholder=
</div>

the columnizer script is like this

$(function(){
  $('.dp-highlighter').addClass("dontsplit");
  $('li').addClass("dontsplit");
  $('.wide').columnize({width:250});
  $('.thin').columnize({width:200});
});

AND my CSS is like this;

.column p, .column h1{ padding: 15px; }
#press {
  text-align: justify;
  margin: 0px 100px; 
  width: 80%;
  color: white;
  font-family: courier, Times New, serif;
}
.wide, .thin { clear:both; }

How can i get a line to display between columns that is similar to the column-rule function?

Answer 1

Create an additional <div> directly inside the block that should be columnized:

<div class="wide">
    <div>
        Here goes your text
    </div>
<div>

and add the rule as a CSS border to this <div>:

.column div {
     border-left: 1px solid black;
 }

Directly adding the border to the .column does not work, but prevents the text to be columnized in most cases.