Question

Sample code

<section id="loadGallery" style="overflow:hidden;">

<?php foreach ($this->imgs as $p)  
{ ?>
<article>
<a href="<?= $C->SITE_URL ?>pics/<?= $p->pic_id ?>">
<img src="/uploads/<?= $p->img ?>"/>
</a>
</article>
<?php }?>

<div class="more" id="<?= $p->pic_id ?>">load more</div>

</section>

The articles have float:left and the images height:150px

First I load 11 imgs and when the .more is click get that last id and load more imgs.Removes the .more div and then change it with the new .more div

Currently when the ajax is successful i’m using $(‘#loadGallery’).append(e);

The problem is that the .more div is not bellow the images instead is next to the last img

Answer 1

.more { clear: both; } should do the trick. I wouldn’t recommend using empty markup for clearing/styling purposes