Divs rendering outside outer-container?

Question

I have a bunch of posts rendering inside an outer container:

<div class="wrapper">
<div class="content">       
    <div class="post">
        <article>
            <div class="artimg">
                <img src="images/some-image.png" alt="some alt text">
            </div>

            <div class="postcontent">
                <h2><a href="#">Title text</a></h2>
                <p>Lorem ipsum blah blah.</p>
            </div>
        </article>
    </div>      
</div> <!-- End content -->
<div class="sidebar">
    ...sidebar stuff...
</div> <!-- End sidebar -->
    <div class="footer">
</div><!-- End footer -->

And the posts are rendering exactly the way I want them to, but their parent .post divs are rendering empty just at the top of the page just on top of the .wrapper div. Here's my scss:

.artimg {
    @include span-columns(3 of 9);
}

.postcontent {
  @include span-columns(6 of 9);
  @include omega();
}

.wrapper {
  @include outer-container;
}


.content {
  @include span-columns(9);
}

.sidebar {
  @include span-columns(3);
  padding:10px;
  @include omega();
}

I don't get it, am I missing something?

Answer 1

I think you need a row() involved here. If .post is made into a row then it will clear the floats that are set by your column mixins.

.post {
  @include row();
}

See demo: http://www.sassmeister.com/gist/51b7247657fd4557bdc2e62298ad4005