Always keeping 3 divs in a row?

Question

I have a problem with aligning divs. I have 5 divs in a container, all floating left, set up as per the image below.

Each of the divs has a width of 425px, the margin between the divs and the container is always 15px and the container has a width of 1350px.

I then also have an onclick JS function that expands clicked div to look like the second image.

This works fine for the first two divs as the third is simply pushed off the edge. However when I open the third div, it falls onto the next line and leaves a gap at the top right corner (see the third image).

I was wondering if anyone had any ideas as to how I would fill that gap with the fourth div, as the ordering doesn't matter, so there is a full top row. (see fourth image)

Thanks for your help.

Answer 1

Here is a solution. I've tried to make it look like how you showed it in the images which you supplied. To expand click on the element, and to remove the expansion simply click on the same element again (I assume that this is how you plan to design it). Edit: Included functionality for restricting only one element to have expansion at a given moment. Check it out!

http://jsfiddle.net/jccJs/10/

$('#container > div').click(expand);

function global_remove_expand_except(barring) {
    $('.exp').each(function (i, cur) {
        if (cur !== barring) {
            remove_expand($(cur));
        }
    });
}

function remove_expand($elem) {
    $elem.removeClass('exp');
    if ($elem.hasClass('swapped')) {
        $elem.removeClass('swapped');
        swap_back($elem);
    }
}

function expand() {
    global_remove_expand_except(this);
    var $this = $(this);
    if ($this.hasClass('exp')) {
        remove_expand($this);
    } else {
        $(this).addClass('exp');
        if (!(($.makeArray($this.parent().children()).indexOf(this) + 1) % 3)) {
            swap($this);
            $this.addClass('swapped');
        }
    }
}

function swap($elem) {
    var after = $elem.next();
    $elem.next().remove();
    $elem.before($(after).click(expand));
}

function swap_back($elem) {
    var before = $elem.prev();
    $elem.prev().remove();
    $elem.after($(before).click(expand));
}

HTML

<div id="container" class="cf">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

CSS

*{
    margin:0;padding:0;
}

/*clearfix credits: http://nicolasgallagher.com/micro-clearfix-hack/*/
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}
#container{
    width:350px;
    border:3px solid red;
}

#container > div{
    float:left;
    position:relative;
    width:100px;
    height:35px;
    border:3px solid black;
    margin:5px;
    text-align:center;
}

#container > div.exp{
    background-color:grey;
    width:216px;
    border-color:transparent;
}

#container > div.exp:after{
    position:absolute;
    top:20%;
    left:18%;
    content:"expansion";
}

Answer 2

you could test if the box is the last in a row, and if it is, swap it with the next box. Like so:

http://jsfiddle.net/DomDay/PExXd/

css:

.container {
    width: 340px
}

.box {
    float: left;
    width: 100px;
    height: 80px;
    border: 1px solid #000;
    margin: 0 10px 10px 0;
}

.box.expanded {
    width: 212px;
}

html:

<div class="container">
    <div class="box">content 1</div>
    <div class="box">content 2</div>
    <div class="box">content 3</div>
    <div class="box">content 4</div>
    <div class="box">content 5</div>
    <div class="box">content 6</div>
    <div class="box">content 7</div>
    <div class="box">content 8</div>
    <div class="box">content 9</div>
</div>

jquery:

$('.box').click( function() {

    // if things have been swapped about, undo it
    swapped = $('.box.swapped');
    swapped.insertBefore( swapped.prev() ).removeClass('swapped');

    //remove expanded
    $('.box.expanded').removeClass('expanded');

    // swap boxes if it's the last box in a row
    clicked = $(this);
    if ( clicked.position().left > 200 ) {
        clicked.addClass('swapped').insertAfter( clicked.next() );
    }

    clicked.addClass('expanded');

} );

Answer 3

For the container, try setting the CSS display to table as follows:

display:table;