Masonry and Jetpack Infinite Scroll - overlap issue

Question

I am trying to implement infinite scroll with Masonry on my archive pages on my theme and I have a couple of issues:

1) The "Load more posts" button is hidden behind the initial posts when you first load the page, see yellow circle:

I feel a bit stupid asking this one but I don't know how to fix this because Jetpack is loading the button in the same container as the posts, which is just the default behaviour, and all the posts are absolutely positioned because of Masonry so I can't clear the button against them with CSS. I want the button to be below the posts.

2) (SOLVED, SEE BELOW ANSWER) When I click the button, the new posts overlap/load behind the initial posts, see picture:

I can't seem to get the Masonry to trigger a relayout after the new posts are loaded. I have looked at this post http://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/ and this question https://wordpress.stackexchange.com/questions/108552/jetpack-infinite-scroll-masonry-on-twenty-twelve-overlap but I can't seem to find a solution to my problem.

The markup before the click:

    <div id="content" class="site-content" role="main">

            <div class="grid-sizer"></div>
            <div class="gutter-sizer"></div>

            <article class="featured">....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <nav role="navigation" id="nav-below" class="navigation-paging">...</nav>

            <div id="infinite-handle">
                <span>Older posts</span>
            </div>

    </div><!-- #content -->

The generated markup after the click:

    <div id="content" class="site-content" role="main">

            <div class="grid-sizer"></div>
            <div class="gutter-sizer"></div>                                    

            <article class="featured">....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <nav role="navigation" id="nav-below" class="navigation-paging">...</nav>

            <span class="infinite-loader" style="display:none">...</span>

            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <div id="infinite-handle">
                <span>Older posts</span>
            </div>

    </div><!-- #content -->

The PHP I am using for Jetpack (the post type in question is mytheme_portfolio) :

function mytheme_render_infinite_scroll() {
    while ( have_posts() ) : the_post();
            if ('mytheme_portfolio' == get_post_type()) :
                get_template_part( 'content', 'archive-portfolio' );
            else :
                get_template_part( 'content', get_post_format() );
            endif;
    endwhile;
}

function mytheme_jetpack_setup() {
    add_theme_support( 'infinite-scroll', array(
        'container'      => 'content',
        'type'           => 'click',
        'render'         => 'mytheme_render_infinite_scroll',
        'wrapper'        => false,
        'posts_per_page' => 5,
    ) );
}
add_action( 'after_setup_theme', 'mytheme_jetpack_setup' );

The jQuery:

(function( $ ) {

    $( document ).ready(function() {

        $('#content').masonry({
          columnWidth: '.grid-sizer',
          itemSelector: 'article',
          gutter: '.gutter-sizer'
        });

        $( document.body ).on( 'post-load', function () {
            $('#content').masonry({
              columnWidth: '.grid-sizer',
              itemSelector: 'article',
              gutter: '.gutter-sizer'
            });
        });

    });

}( jQuery ));

The CSS (although I don't think it's the problem as the initial posts are fine)...compiled with LESS, I'm using calc() to make things responsive:

article,
.grid-sizer {
  width: calc(((100% - (4 - 1)*1.5em)/4)*(1) + ((1 - 1)*1.5em));
}
article.featured {
  width: calc(((100% - (4 - 1)*1.5em)/4)*(2) + ((2 - 1)*1.5em));
}
.gutter-sizer {
  width: 1.5em;
}

Thanks so much for any help anyone can give.