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().


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.

Edited by iamthwee

4 Years
Discussion Span
Last Post by iamthwee

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

    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" */

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.


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

Edited by Dani: Typo


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) {

        total_width = 0;

Makes logical sense I guess.

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

Edited by iamthwee


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>

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.