title: Prevent div from changing size when parent div becomes fixed in Foundation 5
body: <p>I have some nested DIVs, on my page. Inside the content area, I have a row defined, with two DIVs (left DIV is 3 columns and right DIV is 9 columns). I want the left DIV to be sticky at the top of the page when I scroll. My code is working, however when my div sticks to the top of the browser, for some reason the DIV changes width. I can't explain why.</p>
  
  <pre><code>CSS
  @media only screen and (min-width: 40.063em) {
    .my-sticky-element.stuck {
      position: fixed;
      top: 5px;
    }
  }
  
  JS
  var stickyElement = $('.my-sticky-element');
  var vTop = stickyElement.offset().top - parseFloat(stickyElement.css('margin-top').replace(/auto/, 0));
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y &gt;= vTop) {
      stickyElement.addClass('stuck');
    } else {
      stickyElement.removeClass('stuck');
    }
  });
  
  HTML
  &lt;div class="row"&gt;
    &lt;div class="medium-3 columns"&gt;
      &lt;div class="my-sticky-element"&gt;
        &lt;div class="box-body radius bg-white clearfix"&gt;
          &lt;div class=" filter" style="padding-bottom: .5rem;"&gt;
            &lt;i class="fa fa-filter fa-2x text-black"&gt;&lt;/i&gt;
            &lt;input id="contactFilter" type="search" placeholder="Filter by Contact Name" style="margin-bottom: .5rem;" /&gt;
            &lt;a href="#" class="right selectAllContacts"&gt;&lt;i class="fa fa-square-o fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="medium-9 columns"&gt;
      &lt;div class="box-body no-padding" style=""&gt;
        &lt;!--- content --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It seems that <code>.my-sticky-element.stuck</code> causes the div to shrink in width. I have not written the full CSS, however I have observed that before the DIV becomes sticky it is <code>position:relative</code> and after it becomes stuck it is <code>position:fixed</code>.</p>