title: Prevent div contents from spilling out
body: <p>I am having trouble preventing the contents of a div from spilling out. It seems to be related to Foundation's CSS, but I can't figure out what's causing it. Once I remove the Foundation CSS, it works fine.</p>
  
  <p>I'd really appreciate another set of eyes.</p>
  
  <p><a href="http://jsfiddle.net/UR5t9/" rel="noreferrer">http://jsfiddle.net/UR5t9/</a></p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="grid-box round isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);"&gt;
  
          &lt;h5&gt;Title&lt;/h5&gt;
  
          &lt;p&gt;Lorem ipsum&lt;/p&gt;        
  
          &lt;div class="meta round"&gt;
              &lt;div class="avatar"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://fakeimg.pl/46x46" width="46" height="46" alt="Username"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="user"&gt;
                  &lt;a href="#"&gt;
                      Kyle
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="stats"&gt;
                  &lt;ul&gt;
                      &lt;li class="likes"&gt;&lt;i class="icon-thumbs-up"&gt;&lt;/i&gt;12&lt;/li&gt;
                      &lt;li class="saves"&gt;&lt;i class="icon-pushpin"&gt;&lt;/i&gt;1&lt;/li&gt;
                      &lt;li class="comment_count"&gt;&lt;i class="icon-comments"&gt;&lt;/i&gt;1&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;​
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.grid-box {
      position: relative;
      background-color: #ffffff;
      width: 300px;
      margin: 10px;
      float: left;
      padding: 10px;
      border: 1px solid #DDD;
      -webkit-box-shadow: 1px 1px 1px 0px #999; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
      box-shadow: 1px 1px 1px 0px #999; /* Opera 10.5, IE9+, Firefox 4+, Chrome 6+, iOS 5 */
      -webkit-border-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
      border-radius: 6px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
  
      /* useful if you don't want a bg color from leaking outside the border: */
      -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
  }
  
  #grid-container {
      margin: 0 auto;
  }
  
  div.round {
      -webkit-border-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
      border-radius: 6px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
  
      /* useful if you don't want a bg color from leaking outside the border: */
      -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
  }
  
  .actions {
      float: left;
      position: relative;
      left: 50%;
  }
  
  .actions .button-group {
      float: left;
      position: relative;
      left: -50%;
  }
  
  .actions .button-group a {
      text-shadow: 1px 1px 1px #000; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
  }
  
  .meta {
      background: #F0F0F0;
      border: 1px solid #DDD;
      padding: 10px;
      height: 48px;
  }
  
  .meta &gt; .avatar {
      float: left;
      margin-right: 10px;
      width: 46px;
      height: 46px;
  }
  
  .meta &gt; .user {
      line-height: 16px;
      padding-bottom: 10px;
      overflow: hidden;
  }
  
  .meta &gt; .stats ul {
      list-style: none;
      margin-bottom: 0;
      line-height: 14px;
  }
  
  .meta &gt; .stats li {
      color: #777;
      display: inline-block;
      line-height: 14px;
      width: auto;
      margin-right: 19px;
      border: none;
  }
  
  .meta i {
      font-size: 18px;
  }​
  </code></pre>