Auto multi-column fixed height issue with horizontal scroll and images - html

Question

based on this thread
I am trying to use images in the HTML from the above link. Fiddle is here
body {
margin: 0;
padding: 0;
}
.main {
background: yellow;
overflow: hidden;
width: 100%;
}
.columns {
background: red;
-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
height: 120px;
padding: 0 20px;
width: auto;
overflow-x: auto;
}
.columns img{
height:none;
display: block;
}
.columns > p:last-of-type {
margin-right: 20px;
}
Horizontal scrolling works great, but the image gets divided into columns as well. I didn't know that this is even possible. I like it to stay in one part with the height of the column and auto width not with the column width. So that the columns coming after it gets shifted.

Answer 1

I think I find a possible way to realize what I wanted.
Now it uses a bit JS and Jquery. Here is the fiddle.
Main point is to check page.offsetHeight < page.scrollHeight to see if the textfield has overflow. When it has create a new div.
Here is the JS:
$( document ).ready(function() {
$( ".element2" ).each(function( i,obj ) {
if(this.tagName == "IMG"){
$("#paginatedText").append(obj);
}else{
paginateText(obj);
}
console.log(this.tagName);
});
function paginateText(element) {
//console.log(element);
var text = $(element).html(); // gets the text, which should be displayed later on
//console.log(text);
var textArray = text.split(" "); // makes the text to an array of words
createPage(); // creates the first page
for (var i = 0; i < textArray.length; i++) { // loops through all the words
//$( ".element" ).last().append(textArray[i]);
var success = appendToLastPage(textArray[i]); // tries to fill the word in the last page
if (!success) { // checks if word could not be filled in last page
createPage(); // create new empty page
appendToLastPage(textArray[i]); // fill the word in the new last element
}
}
}
function createPage() {
var page = document.createElement("div"); // creates new html element
page.setAttribute("class", "page"); // appends the class "page" to the element
document.getElementById("paginatedText").appendChild(page); // appends the element to the container for all the pages
}
function appendToLastPage(word) {
var page = document.getElementsByClassName("page")[document.getElementsByClassName("page").length - 1]; // gets the last page
var pageText = page.innerHTML; // gets the text from the last page
page.innerHTML += word + " "; // saves the text of the last page
if (page.offsetHeight < page.scrollHeight) { // checks if the page overflows (more words than space)
page.innerHTML = pageText; //resets the page-text
return false; // returns false because page is full
} else {
return true; // returns true because word was successfully filled in the page
}
}
});