gallery before post - wordpress ACF

Question

I am working on wordpress ACF, with posts and a single gallery of images. Both display perfectly.
But I am trying to load my ACF's image gallery AFTER the posts... I try many different ways, playing around with 'endif' / 'endwhile' nothing works.
Any idea of how to change the order ? Thanks !

#gallerie {
    width: 100%; z-index: 990; position: relative; margin-top: 700px;
}
div.image-home {
    text-align: center;
    margin-bottom: 40px;
}
.post{width: 30%; float: left;}

That's it for the important css (the menu on top is fixed)

<?php if(have_posts()) : ?>
<!-- beginning of the gallery -->
<div id="gallerie">
    <?php ;?>
    <?php $images = get_field('image_gallery');?>
    <?php if( $images ): ?>
        <div class="image-home">
            <?php foreach( $images as $image ): ?>
                <a href="<?php echo $image['url']; ?>">
                <img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>                               
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>

<!-- end of the gallery  -->

<?php while(have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>"><br>
        <h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
        <div class="contenu">
            <p><?php the_field('description'); ?></p>
            <p class="postmetadata"><?php the_time('j F Y') ?> par <?php the_author() ?></p>
        </div>                  
    </div>
 <?php endwhile; ?>

Answer 1

It appears you've posted the gallery prior to where the post loop exists entirely (ie, not even at the start of the loop, but before it.)

If you take that same gallery snippet and place it right AFTER the final endwhile , you'll get more of an acceptable result.

edit: It's really hard to comment without knowing or seeing more of the desired result, ie that same snippet could be posted right BEFORE the final endwhile if it is repeated for each post.

CSS

only changed one line:

#gallerie {
    width: 100%; z-index: 990; position: relative; margin-top: 20px;
}

PHP

<?php if(have_posts()) : ?>    
<?php while(have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>"><br>
        <h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
        <div class="contenu">
            <p><?php the_field('description'); ?></p>
            <p class="postmetadata"><?php the_time('j F Y') ?> par <?php the_author() ?></p>
        </div>                  
    </div>
 <?php endwhile; ?>
<!-- beginning of the gallery -->
<div id="gallerie">
    <?php ;?>
    <?php $images = get_field('image_gallery');?>
    <?php if( $images ): ?>
        <div class="image-home">
            <?php foreach( $images as $image ): ?>
                <a href="<?php echo $image['url']; ?>">
                <img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>                               
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>

<!-- end of the gallery  -->

Chrome Dev Tools are Awesome

Also, you're using Chrome which is a great development tool within itself, you're on the Mac, so when you're on your page press Command + Option and i . That will open the Dev Tools.

Expand your code and as you hover over each line (on the code side) you will see in the viewport your margin elements. This will allow you to play with your styling and get it perfected