I think this can help you in your investigations:
div {
display: inline-block; // <-- use display: inline-block instead of float: left
margin: 0 15px 0 0;
cursor: pointer;
}
.expander {
background: coral;
height: 100px;
width: 100%;
margin-bottom: 6px;
float: left; // <-- this float makes the trick
}
.expander
is a div which needs to be inserted after target (hovered in my example) element. It has 100% width to occupy whole horizontal space.
To insert expander
after hovered div I used this javascript (inside for
loop):
div[i].onmouseover = function() {
d.innerHTML = 'Details about div #' + this.dataset.id;
this.parentNode.insertBefore(d, this.nextSibling).style.display = 'block';
}
You can insertAfter in jQuery, etc.