Dynamically add clear float to divs

Hi guys this one has got me stumped.

I'm making a page builder where you can create column divs the maximum per line is 12, each one floated left.

Trouble is I need a clear float when the div column exceeds 12. This is all dynamic being a drag and drop page builder. Why do I need a clear float? Because the columns could have varrying heights and without the clear floats it looks messy on the page.

I've done a bit of research and I believe the solution lies with using jquery position().left().

http://stackoverflow.com/questions/7308773/get-number-of-floated-child-divs-per-row-in-variable-width-parent-jquery

I'm a bit stumped how to implement it.

Somehow the element that I'm dragging needs to evaluate whether it is the last possible div in that row.

[Dani]

Once you figure out which element you want to add a clear after, you can do something like this:

.clear:after
{
    content: "";
    display: block;
    height: 0px;
    clear: both;
}

That will render something like this:

<div class="clear" style="float:left">Blah blah blah</div>
<div style="clear:both"></div> /* Dynamically "created" */

Did you read my question ;)

[Dani]

Yes and I didn't understand it, apparently.

Found this on StackOverflow: http://jsfiddle.net/KgBpx/2/

[Dani]

This might also help you: http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/

Yeah this is way more complex, imagine those divs can be dragged and dropped, and those divs can be resized, all dynamically. That's kinda what I'm after.

[Dani]

Just get the CSS working with static content and then you can 'rebuild/reapply' using jQuery when the DOM changes.

I did some further digging on the page builder I'm basing this on and it seems the code I need goes something like the following. It looks like it is fired when an element is added to the dom, an element is resized, an element is deleted or an element is moved.

var total_width = 0;
var width = 0;

$dom_tree.children(".sortable_container").each(function (index) 
{

    var cur_el = $(this);

    // Width of current element
    if (cur_el.hasClass("span12"))
    {
        width = 12;
    }
    else if (cur_el.hasClass("span10")) {
        width = 10;
    }
    else if (cur_el.hasClass("span9")) {
        width = 9;
    }
    else if (cur_el.hasClass("span8")) {
        width = 8;
    }
    else if (cur_el.hasClass("span6")) {
        width = 6;
    }
    else if (cur_el.hasClass("span4")) {
        width = 4;
    }
    else if (cur_el.hasClass("span3")) {
        width = 3;
    }
    else if (cur_el.hasClass("span2")) {
        width = 2;
    }
    total_width += width;

    if (total_width > 10 && total_width <= 12) {
        cur_el.addClass("last");

        total_width = 0;
    }
});

^^
Makes logical sense I guess.

Will research this tomorrow, this is more freaking complicated then I imagined!

Question - why are you allowing users to exceed your maximum allowed value?

Could you not have a grid like view, where the user drags each div to the appropriate number of columns.

You use span8 for example and then you use a switch/multiple else to add 8 to the width total. You may find a data-width attribute useful, e.g.

<div data-width='12' class='container12'>
    <div data-width='8' class='span8'></div>
    <div data-width='4' class='span4'></div>
</div>

just sum all the .data('width') values. Just an idea.

I'll evalutate this properly tomorrow.