Identify css-created columns and add an extra column with javascript

Question

I've been looking around column newspaper-like layout and I'm wondering if there's a way to identify the columns (or column breaks) through css or javascript and pragmatically add content between columns with javascript.

The basic idea is that I have a layout with 100% height and columns are created extending to the right of the screen like here : http://www.kaikkonendesign.fi/columns/ And what I want is that for example after the 1st column I add an extra column between col #1 and #2 and in that column I would add content (image, extra links...)

I know how to add content with javascript with innerHtml and I found a way to count the number of columns (Get number of columns created by css column-width or How to get css3 multi-column count in Javascript) but I don't see how to get the class or ID of a column or column-break to see where to append my html.

Is it possible with some code to say to the browser "after colum#1 add another column" or "after column#1 add this content of 100% height" or "after column#1 add an empty space of XXpx (and display an absolutely-positionned div)" for example ?

Here is an example to illustrate : http://hpics.li/a99853b

Edit : as asked here is a quick fiddle with basic html/css columns : https://jsfiddle.net/p8ar0zpr/1/

<div class="example">
  <h1>Sed dignissim lacinia nunc</h1>
  <p class="lead">Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>
</div>



 .example {
  -webkit-columns: 320px;
  -moz-columns: 320px;
  columns: 320px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
  height:95%;
  padding:1em;
}
html{height:100%;}
body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 0;
  margin:0;
  height:100%;
}

h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

p {
  margin-bottom: 1.3em;
  text-align: justify;
}

.lead {
  font-variant: small-caps;
  font-size: 1.3em;
  text-align: left;
  font-style: italic;
}

Thanks,

Answer 1

An approach you could use is to check the position of the top-left of each of the p elements. The p element at the top of each column will be higher on the page than the previous one. (or will not have one before it).

Here's something to play with. It simply highlights the p at the top of each column.

window.addEventListener('load', onDocLoaded, false);
HTMLCollection.prototype.forEach = Array.prototype.forEach;

function onDocLoaded(evt)
{
 getColumnTops();
}


function getColumnTops()
{
 // 1. get an HTMLCollection of all p elements in the page
 var paras = document.getElementsByTagName('p');

    // 2. step through the collection, checking items' Y pos on the page
 paras.forEach(checkPosition);
}

var lastValue = 1000000;  // dummy value to ensure first one is detected.
function checkPosition(elem, index, array)
{
 if (elem.offsetTop < lastValue)
 {
  // console.log(elem.offsetTop);
  elem.classList.add('colTop');
 }
 lastValue = elem.offsetTop;
}

.example {
  -webkit-columns: 320px;
  -moz-columns: 320px;
  columns: 320px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
  height:95%;
  padding:1em;
}
html{height:100%;}
body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 0;
  margin:0;
  height:100%;
}

h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

p {
  margin-bottom: 1.3em;
  text-align: justify;
}

.lead {
  font-variant: small-caps;
  font-size: 1.3em;
  text-align: left;
  font-style: italic;
}

.colTop
{
 background: rgba(200,0,0,0.25);
}

<div class="example">
  <h1>Sed dignissim lacinia nunc</h1>
  <p class="lead">1 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>2 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>3 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>4 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>5 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">6 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>7 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>8 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>9 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>10 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">11 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>12 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>13 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>14 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>15 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">16 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>17 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>18 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>19 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>20 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">21 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>22 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>23 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>24 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>25 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">26 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>27 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>28 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>29 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>30 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">31 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>32 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>33 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>34 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>35 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
  <p class="lead">36 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>37 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>38 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>39 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>40 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
</div>