Alignment Of Sortable Jquery Ui Divs With Spacing Between Them

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

Solution 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.

Solution 2:

EDIT: oops, i overlooked that you allready tried this. However, it seems to work fine when you move the blocks?

You could use the CSS3 property nth-child:

.block:nth-child(3n+1) { /* 1st, 4th, 7th, ... element */margin-left:1%;
}
.block:nth-child(3n+3) { /* 3rd, 6th, 9th, ... element */margin-right:1%;
}

However, there's some strange things going on I can't explain:

• It doesn't perfectly align with a width of 680px - but it does with a width of 700px - I have no idea why... (in Chrome, Firefox works fine at 680, too)

http://jsfiddle.net/hC5Qy/2/