Broken layout with masonry.js but works when adding Foundation 5

Question

Objective
To have a functioning "pinterest style" layout.

enter image description here

Background
I previously created a blog concept with Masonry and the layout was pretty smooth. To show how it is supposed to work, I posted This video on youtube

I had my original conceptual demo on codepen which used Foundation 5.

Then I forked this broken demo in question - on codepen.

But it does not work if I remove Foundation 5. But that is really weird because there are no foundation classes anywhere in the HTML.

Problem
This should not at all rely on Foundation 5. When I remove the external Foundation 5 file, the containers are floated to either side.

enter image description here

And the layout goes to single item per column even when the browser window accomodate many more.

enter image description here

Current State

It works but should not rely on Foundation.

Code

HTML

<div id="gallery-content" class="clearfix">

  <!-- Case 1 -->  
    <div class="case-box item">
      <img src="http://ships.bouwman.com/Planes/Boeing---X-48B.jpg" />
      <div class="case-country country-us"></div>

      <div class="case-description">
        <p>Boeing Blended Wing X-48B</p>
      </div>

      <div class="case-options">
        <a href="#">Details<i class="fa fa-arrows-alt"></i></a>
      </div>
    </div> 

    <!-- many more containers then closed off by #gallery-content div -->

CSS

The CSS from Foundation 5 coming from CDNJS.

//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.min.css

And this code that I wrote

#gallery-content {
  width: auto;
  margin: 0 auto;
}

.item {
  display: block;
  float: left;
  width: 300px;
  margin: 0 20px 20px 0;
  -webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  -o-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
  transition: left .4s ease-in-out, top .4s ease-in-out .4s;
}

.item img { width: 300px; height: auto; }

.case-box {
  border: #888 1px solid;
  padding-bottom: 72px;
  position: relative;
}

.case-box {
  -webkit-border-top-left-radius: 2px;
  -webkit-border-top-right-radius: 2px;
  -moz-border-radius-topleft: 2px;
  -moz-border-radius-topright: 2px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JavaScript

jQuery

Masonry From CDNJS

//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.min.js

And this code

$(document).ready(function() {

  // Initialize Masonry
  $('#gallery-content').masonry({
    columnWidth: 320,
    itemSelector: '.item',
    isFitWidth: true,
    isAnimated: !Modernizr.csstransitions
  }).imagesLoaded(function() {
      $(this).masonry('reload');
    });
  });

Live link:
http://codepen.io/JGallardo/pen/BuCbn.

Presumably there is a reset in foundation that is over-riding browser defaults. Hard to diagnose without a live link — Steve, Jun 19 '14 at 01:20
@user574632 In included like 3 links to it but here it is again. [http://codepen.io/JGallardo/pen/BuCbn](http://codepen.io/JGallardo/pen/BuCbn) — JGallardo, Jun 19 '14 at 01:23

score 1 · Accepted Answer · answered Jun 19 '14 at 01:33

1

The specific Foundation CSS that makes your demo work as expected is:

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Without this rule your items are 2 pixels wider, due to their border with being included in the box model calculation, and I expect that's what's breaking the layout.

Here is a fork of your pen, with Foundation removed: http://codepen.io/anon/pen/nkmgJ

answered Jun 19 '14 at 01:33

Jonathan Nicol

3,158
1
21
22

Would you happen to have a suggestion how I can edit my question so that others can find this if they have related issues. I dug further into your solution and ran into Paul Irish's blog post about [box sizing](http://www.paulirish.com/2012/box-sizing-border-box-ftw/) and that explains the same issues that I ran into caused by border. It turns out that my problem is neither related to masonry nor foundation in specific. – JGallardo Jun 23 '14 at 17:43

score 0 · Answer 2 · edited May 23 '17 at 12:29

I accepted the answer by Jonathan because he technically answered it as I originally phrased my question.

However the real issue here is neither with MasonryJS nor does Foundation offer the real solution. The reason foundation.css offered the remedy is because of the box sizing reset which was needed because of the border: #888 1px solid;.

In a post by Paul Irish, he discusses how to solve this issue with

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

Full post available at: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Of course there are issues with Internet Explorer versions below 9. You can read more about this at box-sizing: border-box => for IE8?

Chris Coyer discusses box sizing more in depth at http://css-tricks.com/box-sizing/.

But the easiest fix to maintain compatibility without relying on this reset was to have just used outline instead of border. You can read more about that at Difference between outline and border.

So while in my own project I added that reset. I also made sure to change my code from

.case-box {
  border: #888 1px solid;
  padding-bottom: 72px;
  position: relative;
}

To

.case-box {
  outline: #888 1px solid;
  padding-bottom: 72px;
  position: relative;
}

Broken layout with masonry.js but works when adding Foundation 5

2 Answers2