Question

So here is the issue, I have 6 divs that are using jQuery UI sortable. They are arranged as can be seen in the image below.

The image is the layout I am looking for, equal spacing between each of the divs, but with the end ones up against the edges of the container.

My understanding is that this cannot be done by, for example, setting a margin-right:10px on all of them, and removing the margin on the 3rd and 6th elements as these may be dragged to a different position, therefore they would no longer be in the 3rd and 6th position.

I don’t think it can be done either by adding each section into a column div and setting connectWith in the jQuery sortables setting as this set of 6 are themselves inside a div that is connected to other lists, and I dont think you can have connectWith: ‘.connectedSortable, .column’ anyway.

I did also try using the pseudo-class :nth-child(n) but could not get the margins updating correctly when the elements were dragged around 🙁

You can view a jsfiddle here > http://jsfiddle.net/hC5Qy/1/

The width of the boxes are currently set at 32%, the idea being I could set a 2% right/left margin on two of the boxes to give 100% (32 + 32 + 32 + 2 + 2 = 100).

So any ideas?

Are there any JavaScript ways of doing this? Any new CSS3 or HTML5 layouts usable to center the middle box? (I’m not worried about old browser compatibility).

Any help is greatly appreciated!

Thanks

[edit: some code from the fiddle]

HTML:

<div id="area1" class="connectedSortable">       
    <div class="block"><span style="font-size:3em; color:#CCC;">1</span></div>
    <div class="block"><span style="font-size:3em; color:#CCC;">2</span></div>
    <div class="block"><span style="font-size:3em; color:#CCC;">3</span></div>
    <div class="block"><span style="font-size:3em; color:#CCC;">4</span></div>
    <div class="block"><span style="font-size:3em; color:#CCC;">5</span></div>
    <div class="block"><span style="font-size:3em; color:#CCC;">6</span></div>       
</div>

JS:

$(function() {
    $(".connectedSortable ").sortable({
        connectWith: ".connectedSortable"
    });

    $(".connectedSortable").disableSelection();
});

CSS:

#area1, #area2 {
 border:1px solid red;
 float:left;
 width:680px;
 margin-bottom:15px;
 background:#ccc;
}

.block {
    background:green;
    width:32%;
    height:200px;
    float:left;
    margin-right:1%;
    margin-top:10px;
}

Answer 1

(deleted prior post):

It’s not nth-child, it’s the combination of floats and percentages. Here’s a hacky way I “fixed” it:

http://jsfiddle.net/hC5Qy/5/

#area1, #area2 {
 border:1px solid red;
 float:left;
 width:680px;
 margin-bottom:15px;
 background:#ccc;
}

.block:nth-child(3n+3) { 
    margin-right: 0 ; // get rid of extra margin 
    float: right; // floating it right ensures no gap on right if rounding changes gutters
}

.block {
    background:green;
    width:32%; // 3 of these = 96%
    float: left;
    height:200px;
    margin-right:2%; // 2 of these = 4% for a total of 100%
    margin-top:10px;
}

Used nth-child to give every 3rd element no right margin and floated right, and narrowed the container. This gives a vague approximation of what you need to do.

However, with your margins etc. based on % you will have a hard time making it perfectly consistent all the time. At some point there are going to be numbers rounded off to the nearest pixel (browsers render ultimately on pixels!) so your margins can be a pixel or two off.

There’s more work that can be done to make it more consistent, but I didn’t think you needed me to tweak endlessly at it; I got the impression you just want to know “what’s up?” so that you can continue on it yourself. 😉

For my two cents, I would use no floats, instead relying on display: inline-block. Inline-block is not supported in IE7 and below, though there are hacks to fake it. If IE6 and 7 are not important to the project, I would refactor the layout using inline-block.