Question

I’m doing a grid system for a site. The markup lookes like this

<div class="section">
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
</div>
<div class="section">
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
</div>  

The class grid is 33.3333333333% wide.

I want to insert a div every time the grid sums up to 100 or close to 100%. This way the markup would look like this

<div class="section">
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
        <div class="clear"></div> <!-- inserted div -->
    <div class="grid">

    </div>
</div>
<div class="section">
    <div class="grid">

    </div>
    <div class="grid">

    </div>
    <div class="grid">

    </div>
       <div class="clear"></div> <!-- inserted div -->
</div>  

This is what I have so far. My wrapper is max 972px wide

var grid = $('.grid');
var wrapper = $('.wrapper').width();

$(grid).each(function () {
    var gridWidth = $(this).width();
    var percentage = (gridWidth / wrapper)*100;


    console.log(percentage);
});

Can anyone help me ?

EDIT:
I added a screenshot, so you can see the issue. The fouth element has a margin-left, which is should not have. This is why I want to add a clear

Answer 1

First of all there pay attention in some discrepancies in your code. In HTML you’re using “section” class, in jQuery you’re selecting “.wrapper”.

And than you should try something like this:

$('.section').each(function() {

    var rowPixels = 0;
    $(this).find('.grid').each(function () {

        var gridWidth = $(this).width();
        rowPixels += gridWidth;

        if (rowPixels >= $('.section').width()) {
            $(this).after('<div class="clear"></div>');
            rowPixels = 0;
        }

    });

});