While Loop displays arguments inside the first argument

I have a while loop created to display all my wordpress posts. The issue is that all the posts (except the first) appear inside the first post.

I’ve check my div structures and I couldn’t find any issues. The loop is working, but the div isn’t showing in the right place.

<div class="slider-vertical">
    <!-- This is the main loop for the posts -->
    <?php
    $count = 0;
    while ( $all_posts->have_posts() ) : $all_posts->the_post();
    $count++;
    // Variabled for the specific fields (color, 3D objects and so on...)
    $fond_couleur = get_field('fond_de_couleur_hex');
    $visuel_3D = get_field('source_iframe_3d');
    $visuel_3D_2 = get_field('source_iframe_3d_2');

    // get_template_part( 'template-parts/content', 'portfolio' );
    $content = get_the_content();
    $content = apply_filters( 'the_content', $content );
    $content = str_replace( ']]>', ']]&gt;', $content );

    $gallerieArray = get_field('image_galerie');

    $title = get_the_title($post);
    ?>
    <!-- HTML structure for the posts - this is displayed, but only the first one is at the right place -->
    <?php 
    echo '<div class="post-numero';
    if($count == 1){
        echo ' actif';
    }
    echo '">';
    ?>
    <!-- DIV that contains the 3D object -->
        <div class="visuel-3d" style="background:<?php echo $fond_couleur;?>;">
            <!-- Injecting the 3D Object via an iframe -->
            <div class="slider-horizontal">
                <?php echo '<span class="post-horizontal actif">'. $visuel_3D .'</span>';?>
                <?php if($visuel_3D_2){
                        echo '<span class="post-horizontal">'. $visuel_3D_2 .'</span>';
                    } ?>
            </div>
            <h2 class="titrePost"><?php echo $title; ?></h2>
        </div>
        <!-- Cross used to close the rightside menu -->
        <span class="arrow-right-sidebar">x</span>
        <!-- HTML structure for the rightside menu -->
        <div class="right-sidebar-content foo">
            <div class="right-top">
                <h2 style="text-align: center;"><?php echo $title; ?></h2>
            </div>
            <div class="right-bottom">
                <div><?php echo $content ?></div><!-- That is where the next posts of the while loop get printed -->
                <div class="gallerie-sidebar-full">
                    <?php // loop for the image gallery at the bottom of the rightside menu
                        if ($gallerieArray == true){
                            foreach($gallerieArray as $key => $val){
                                $gallerieImages[] = $val["url"];
                            }
                            $idg = 0;
                            foreach ($gallerieImages as $val){
                                echo '<img id="id-'. $title .'-'. $idg .'" class="gallerie-sidebar" src="'. $val .'">';
                                $idg += 1;
                            }
                        }
                    ?>
                </div>
            </div>
        </div>
    </div>

    <?php
        endwhile;
    ?>
</div>

What is expected is 4 different posts inside the “slider-vertical” div displayed at the same level in the HTML structure. The actual result is the first post at the correct level and then the next posts 2 levels deeper inside the first post.

Answer

this kind of problem occurs when there is a not properly closed HTML tag on the first execution of the loop, try to use a short statement syntax

echo '<div class="post-numero'. (($count == 1)? ' actif' : '').'">;

check also the content printed by <?php echo $content ?> of the first post, may contains an open HTML tag.

You can easily check the generated code using the souce view (CTRL+U) in Firefox that highlights in red the wrong HTML closing tags