multiple-columnszurb-foundationspacegrid-system

ZURB Foundation and row collapse

i have posted a question on ZURB's forum, but i noticed there were no answers to any post. As i think this problem might occur to many others, i think it might be a good idea to put it on SO as well. Here it comes:

i have crafted a minimal example of the problem using the following markup (Edited with CLCS advices):

<body>
    <div class="row collapse test">
      <div class="large-4 columns">
          <p>Test 1</p>
        </div>
        <div class="large-4 columns">
          <p>Test 2</p>
        </div>
        <div class="large-4 columns">
          <p>Test 3</p>
        </div>
      </div>
</body>

All CSS classes are ZURB Foundation untouched classes. The only addition is for the test-table class, which sole purpose is only to get visual aid on the problem (Edited as well for clarity sake):

.test div {
  border: 1px solid red;
}

The expected output would be 3 columns perfectly touching each other. The actual output is two columns touching each other like expected, but the third one being offset a bit on the right, leaving a white space between the center and the right one (See attached image, edited as well, but issue still present).

Seems that some other users are facing the same problem under the same environment (Safari 7, Zurb Rails Gem 5.0.2.0)

enter image description here

Solution

  • Looks like a rounding issue with how Safari is converting the % widths of the columns, default site width ends up (on my machine at least) at 1000px wide. Comparing the calculated results between Chrome and Safari I get 333.328px in Chrome and 333px in Safari.

    Depending on the rest of your layout requirements a workaround may be to adjust your layout widths to a figure that works better with the columns you require.