HTML5

by Radhika Magaji

HTML

<form onsubmit="return false"  oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number"> +
<input name="b" type="number"> =
<output name="o" ></output>
</form>

<div class="magazine">

Your text goes here which you want to divide in to 3 columns.Your text goes here which you want to divide in to 3 columns.Your text goes here which you want to divide in to 3 columns.Your text goes here which you want to divide in to 3 columns.

</div> 

<div id="col_rul"> 
  <p> column one </p>
  <p> column two </p>
  <p> column three </p>
</div>

CSS

.magazine
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:20px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px dotted #ff00ff;
}

#col_rul { 
  padding: 0.3em;
  background: gold; 
  border: groove 2px gold;
  column-rule: inset 2px gold;
  column-count: 4;
}