Question

Let’s say I have six <div> elements inside a container <div>. Each of these six divs is a square and have the CSS style float: left applied. By default, when they reach the edge of the container <div> they will wrap.

Now, my question is, using Javascript, is it possible to determine at which element the wrap is?

If they display on the page like:

 ___   ___
| 1 | | 2 |
----- -----
 ___   ___
| 3 | | 4 |
----- -----

I’m trying to determine that the wrap occurs between the second and third element. In case you are wondering if I have lost my mind, the reason I am trying to do this is if one of those boxes is clicked, I want to be able to drop down an info area between the rows with some fancy shmansy jQuery.

 ___   ___
| * | | ! |
----- -----
| Someinfo|
 ___   ___
| * | | * |
----- -----

Any ideas on determining where the break occurs?

P.S. The reason I am floating and letting it auto wrap is to make it responsive. Right now if I resize the browser, it wraps the boxes accordingly. I don’t want to hard code column widths.

[EDIT]
Thanks to the answer provided by Explosion Pills, I was able to come up with a solution.

// Offset of first element
var first = $(".tool:first").offset().left;
var offset = 0;
var count = 0;

$(".box").each(function () {

   // Get offset            
   offset = $(this).offset().left;

   // If not first box and offset is equal to first box offset
   if(count > 0 && offset == first)
   {
      // Show where break is
  console.log("Breaks on element: " + count);
   }

   // Next box
   count++;
});

This output the following in the console:

Breaks on element: 7 
Breaks on element: 14
Breaks on element: 21
Breaks on element: 28 

When I had 30 boxes, which ended up being 7 boxes wide and 5 rows (last row only 2 boxes)

Answer 1

Just divide the width of the container by the width of the boxes..
(assuming the squares are of equal width..)

This will select the last element of each row

var wrapper = $('.wrapper'),
    boxes = wrapper.children(),
    boxSize = boxes.first().outerWidth(true);

$(window).resize(function(){
    var w = wrapper.width(),
        breakat = Math.floor( w / boxSize); // this calculates how many items fit in a row 

    last_per_row = boxes.filter(':nth-child('+breakat+'n)') // target the last element of each row
    // do what you want with the last_per_row elements..
});

Demo at http://jsfiddle.net/gaby/kXyqG/