title: Determine wrap location in floated elements
body: <p>Let's say I have six <code>&lt;div&gt;</code> elements inside a container <code>&lt;div&gt;</code>. Each of these six divs is a square and have the CSS style <code>float: left</code> applied. By default, when they reach the edge of the container <code>&lt;div&gt;</code> they will wrap. </p>
  
  <p>Now, my question is, using Javascript, is it possible to determine at which element the wrap is?</p>
  
  <p>If they display on the page like:</p>
  
  <pre><code> ___   ___
  | 1 | | 2 |
  ----- -----
   ___   ___
  | 3 | | 4 |
  ----- -----
  </code></pre>
  
  <p>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.</p>
  
  <pre><code> ___   ___
  | * | | ! |
  ----- -----
  | Someinfo|
   ___   ___
  | * | | * |
  ----- -----
  </code></pre>
  
  <p>Any ideas on determining where the break occurs? </p>
  
  <p>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.</p>
  
  <p><strong>[EDIT]</strong>
  Thanks to the answer provided by Explosion Pills, I was able to come up with a solution.</p>
  
  <pre><code>// 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 &gt; 0 &amp;&amp; offset == first)
     {
        // Show where break is
    console.log("Breaks on element: " + count);
     }
  
     // Next box
     count++;
  });
  </code></pre>
  
  <p>This output the following in the console:</p>
  
  <pre><code>Breaks on element: 7 
  Breaks on element: 14
  Breaks on element: 21
  Breaks on element: 28 
  </code></pre>
  
  <p>When I had 30 boxes, which ended up being 7 boxes wide and 5 rows (last row only 2 boxes)</p>