Prevent div contents from spilling out

Question

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.

I'd really appreciate another set of eyes.

http://jsfiddle.net/UR5t9/

The HTML:

<div class="grid-box round isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">

        <h5>Title</h5>

        <p>Lorem ipsum</p>        

        <div class="meta round">
            <div class="avatar">
                <a href="#">
                    <img src="http://fakeimg.pl/46x46" width="46" height="46" alt="Username">
                </a>
            </div>
            <div class="user">
                <a href="#">
                    Kyle
                </a>
            </div>
            <div class="stats">
                <ul>
                    <li class="likes"><i class="icon-thumbs-up"></i>12</li>
                    <li class="saves"><i class="icon-pushpin"></i>1</li>
                    <li class="comment_count"><i class="icon-comments"></i>1</li>
                </ul>
            </div>
        </div>

    </div>​

The CSS:

.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 > .avatar {
    float: left;
    margin-right: 10px;
    width: 46px;
    height: 46px;
}

.meta > .user {
    line-height: 16px;
    padding-bottom: 10px;
    overflow: hidden;
}

.meta > .stats ul {
    list-style: none;
    margin-bottom: 0;
    line-height: 14px;
}

.meta > .stats li {
    color: #777;
    display: inline-block;
    line-height: 14px;
    width: auto;
    margin-right: 19px;
    border: none;
}

.meta i {
    font-size: 18px;
}​

Answer 1

The problem is that your setting an explicit height to .meta. Remove that height and it works just fine.

Answer 2

Put a height:auto; in your div.round CSS

Here is an update on your jsFiddle http://jsfiddle.net/UR5t9/1/

I.E

    div.round {
      height:auto;
      -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;
    }