Hello

I have the following two tags. The first tag I want to define that it only shows 6 pictures on one site. The next tag should show the next 6 pictures and so on. All pictures coming from listings. Ech listing will have a diffrent number of images. How can I define the tag that all pictures from the listing mask  will be imported to the PDF, first 6 images on the first page than the next images on the next page. 

Many thanks!

<div class="divImagesWrapper">
<div style="background-color: white; margin-top:100px;">
<apex:variable var="cnt" value="{!1}" />
<apex:repeat value="{!images}" var="image">
<div class="divSmallImg" style="display:{!IF(cnt > 6,'none','inline-block')}; Padding-top:10px; margin-right: 0px; margin-left: 30px; margin-top:0px; margin-bottom: 20px;">
<apex:image styleClass="imgSmallImg" url="{!image.pba__MidresURL__c}" style="width: 300px;"/>
</div>
<apex:variable var="cnt" value="{!cnt + 1}" />
</apex:repeat>
</div></div>
<div style="page-break-after:auto;"></div>    

<div class="divImagesWrapper">
<div style="background-color: white; margin-top:190px;">
<apex:variable var="cnt" value="{!5}" />
<apex:repeat value="{!images}" var="image">
<div class="divSmallImg" style="display:{!IF(cnt > 6,'float','inline-block')}; Padding-top:10px; margin-right: 0px; margin-left: 30px; margin-top:0px; margin-bottom: 20px;">
<apex:image styleClass="imgSmallImg" url="{!image.pba__MidresURL__c}" style="width: 300px;"/>
</div>
<apex:variable var="cnt" value="{!cnt + 1}" />
</apex:repeat>
</div></div>
<div style="page-break-after:auto;"></div>

I have one apex code <apex:outputfield value="{!pba__Listing__c.Object_description__c}"></apex:outputfield>. The content of this code will always have a diffrent length and goes over 1-3 pages. So its defined as one big body. I want to define the header and footer for each page.
But I cannot figure out how to define this apex code that it finishes at the bottom of each page.  
All submissions I give in for header and footer are just shown up at the first page and on the last page. But not for the pages in the middle. I tried already several instructions to define it but the header and footer always float over the content in the apex code or the other way around. 

Any suggestions how I can solve my problem?

I have one apex code <apex:outputfield value="{!pba__Listing__c.Object_description__c}"></apex:outputfield>. The content of this code will always have a diffrent length and goes over 1-3 pages. So its defined as one big body. I want to define the header and footer for each page.
But I cannot figure out how to define this apex code that it finishes at the bottom of each page.  
All submissions I give in for header and footer are just shown up at the first page and on the last page. But not for the pages in the middle. I tried already several instructions to define it but the header and footer always float over the content in the apex code or the other way around. 

Any suggestions how I can solve my problem?