Edit Question - KnowledgeHub

Title Body

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 wid

Tags (comma-separated) Cancel