While Loop displays arguments inside the first argument - php

Question

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( ']]>', ']]>', $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 1

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