Calculate div width and insert clear div
<p>I have this code.</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The children of the container DIV have different heights, which means I get float issues. I would like some jquery that looks at the childrens widths, calculates them, and if they are 100% or close to, a div with a clear class is added to the markup.</p>

<p>However, I have no clue how to start. The divs are all in percentage.</p>

<p><strong>UPDATE:
For responsive stuff I changed the code a bit, so it can be added or removed. Also I had one of the javascript guys in the company optimize it</strong></p>

<pre><code>$(window).load(function () {
    clearContext();
});

$(window).resize(function () {
    clearContext();
});



function clearContext(){
    $('.contextElements .spot').addLineBreak(); //Choose target
}



// PLUGIN
(function($) {
    $.fn.addLineBreak = function() {
        var $this = this,
            minLeft = 0;

        //clear
        $('.removeDiv').remove();

        minLeft = $this.first().position().left;

        $this.each(function() {
            var $elm = $(this),
                position = $elm.position();

            if (position.left &gt; minLeft &amp;&amp; $elm.prev().position().left &gt;= position.left) {        
                $elm.before('&lt;div class="clear removeDiv"&gt;&lt;/div&gt;');
            }
        });

        return this;
    }
})(jQuery);
</code></pre>
