{"action":"created","issue":{"url":"https://api.github.com/repos/metafizzy/isotope-packery/issues/7","labels_url":"https://api.github.com/repos/metafizzy/isotope-packery/issues/7/labels{/name}","comments_url":"https://api.github.com/repos/metafizzy/isotope-packery/issues/7/comments","events_url":"https://api.github.com/repos/metafizzy/isotope-packery/issues/7/events","html_url":"https://github.com/metafizzy/isotope-packery/issues/7","id":59180931,"number":7,"title":"isotop packery problems with percentage","user":{"login":"edkpan","id":11222152,"avatar_url":"https://avatars.githubusercontent.com/u/11222152?v=3","gravatar_id":"","url":"https://api.github.com/users/edkpan","html_url":"https://github.com/edkpan","followers_url":"https://api.github.com/users/edkpan/followers","following_url":"https://api.github.com/users/edkpan/following{/other_user}","gists_url":"https://api.github.com/users/edkpan/gists{/gist_id}","starred_url":"https://api.github.com/users/edkpan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edkpan/subscriptions","organizations_url":"https://api.github.com/users/edkpan/orgs","repos_url":"https://api.github.com/users/edkpan/repos","events_url":"https://api.github.com/users/edkpan/events{/privacy}","received_events_url":"https://api.github.com/users/edkpan/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-02-27T02:38:29Z","updated_at":"2015-02-27T13:13:13Z","closed_at":null,"body":"Hello,\r\nI'm using the packery mode with percentage and I figured out there is an issue with how divs are positionned. When my percentage isn't even (p/3) divs can't get right at all!\r\nI suspect that positionning divs with pixels (left & top) isn't accurate enough.\r\nDid I miss something? How may I get it right? Is there a percentage mode for positionning?\r\n\r\nHere is the css code I use to size square and rectangular div like 1/3 or 2/3\r\n@media only screen and (min-width: 740px) and (max-width: 959px) {\r\n\t.item{\r\n\t\twidth: calc(100% / 3 * 1);\r\n\t\tpadding-bottom: calc(100% / 3 * 1); }\r\n\t.item.w2 { width: calc(100% / 3 * 2); }\r\n\t.item.h2 { padding-bottom: calc(100% / 3 * 2); }\r\n}\r\n\r\n(Sorry for any kind of mistranslation, kiss from Paris)"},"comment":{"url":"https://api.github.com/repos/metafizzy/isotope-packery/issues/comments/76392189","html_url":"https://github.com/metafizzy/isotope-packery/issues/7#issuecomment-76392189","issue_url":"https://api.github.com/repos/metafizzy/isotope-packery/issues/7","id":76392189,"user":{"login":"desandro","id":85566,"avatar_url":"https://avatars.githubusercontent.com/u/85566?v=3","gravatar_id":"","url":"https://api.github.com/users/desandro","html_url":"https://github.com/desandro","followers_url":"https://api.github.com/users/desandro/followers","following_url":"https://api.github.com/users/desandro/following{/other_user}","gists_url":"https://api.github.com/users/desandro/gists{/gist_id}","starred_url":"https://api.github.com/users/desandro/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/desandro/subscriptions","organizations_url":"https://api.github.com/users/desandro/orgs","repos_url":"https://api.github.com/users/desandro/repos","events_url":"https://api.github.com/users/desandro/events{/privacy}","received_events_url":"https://api.github.com/users/desandro/received_events","type":"User","site_admin":false},"created_at":"2015-02-27T13:13:13Z","updated_at":"2015-02-27T13:13:13Z","body":"Thanks for that! This looks to be related to how the borders throw off the size calculation. If borders are removed, I don't see any gaps http://codepen.io/desandro/pen/vErxbb\r\n\r\nI investigated this and it appears you came into a rare browser bug, when you use `padding-bottom`, `calc`, and `box-sizing: border-box`. See http://codepen.io/desandro/pen/YPvZgd\r\n\r\nTo resolve this, I adjusted add `padding-bottom` values to account for the 2px border size. See http://codepen.io/desandro/pen/OPEjeL\r\n\r\n"}}