Django Endless Pagination Twitter Style - How can I get div outside of other div / unested from other div

Question

I am using Django Endless Pagination. All is working fine without any problem, I chose the Twitter Style with Show More option.

Here is the HTML render of the result I included also media queries so you can resize the window and see the problem in more details.

Can be viewed here: http://codepen.io/anon/pen/lrLiG

Screenshots: 1. 2. 3.

My problem that I am having, by tweaking the CSS of it I want to achieve that I would like to have "SHOW MORE" always at the bottom and centered on each device Desktops - Tablets - iOS/Android Devices - no matter where you load the page, like this:

Styling of the "SHOW MORE" its not a problem, I need help to position it correctly. In HTML render is easy to move the:

 <div class="endless_container">
    <a class="endless_more" href="#">Show More</a>
    <div class="endless_loading" style="display: none;">loading...</div>
</div>

out of the

<div id="product-board">

but I cant do it because by docs for django endless pagination I used ajax:

{% load endless %}
{% lazy_paginate photos %}

    {% for photo in photos %}

        {% load cropping %}

        <div class="product large"><a href="/media/{{ photo.main_image }}" data-imagelightbox="e"><img src="{% cropped_thumbnail photo "cropping" %}" alt="" border="0" class="img-responsive"></a></div>

    {% endfor %}

    {% show_more "Show More" "loading..." %}

and

{% show_more "Show More" "loading..." %}

is responsible that the

<div class="endless_container">
    <a class="endless_more" href="#">Show More</a>
    <div class="endless_loading" style="display: none;">loading...</div>
</div>

is inside in that other div.

What is the best approach to solve this? Should I build the 2 templates for ajax in django pagination differently than in docs?

Thank you

Answer 1

Styling endless_container would solve your problem:

.endless_container{
    clear: both;
    width: 100%;
    text-align: center;
}