How to target div at the end of the row?

Question

I am trying to insert a box strip in between rows of divs, how can I target the end of each row's div?

Here's a JSFiddle of the divs: http://jsfiddle.net/5Sn94

Here's the code:

<div>
    <img src="//placehold.it/50x50">
</div>
<div>
    <img src="//placehold.it/50x50">
</div>
<div>
   <img src="//placehold.it/50x50">
</div>

After a while, the divs will go onto the next line, creating a new 'row'. How can I insert a div which spans across the full page width, underneath a row of divs.

To show you what I want to achieve, visit this link on Google: http://bit.ly/1329rDn

And then you'll see if you click any image, it will open that new image bigger inbetween the div rows, how was this achieved? And how can I do the same?

Answer 1

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
}

http://jsfiddle.net/5Sn94/14/

.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.

Answer 2

You can use document.getElementsByTagName but it will only work if you don't have any other divs on the page http://jsfiddle.net/5Sn94/2/

var divs = document.getElementsByTagName('div');
divs[divs.length-1].style.border = '1px solid red';

Answer 3

Using jQuery, you can use the last-child selector: http://jsfiddle.net/5Sn94/1/