Skip to content

Div will always shift up after refreshing the page

I have 2 divs on the webpage, the flipbook that is created using turnjs and another div containing the buttons. When I load the page, the divs are in the center of the page: . After I refresh the page, the divs will shift up and stay there even after refreshing the page. This is how the page looks after refreshing: .

This is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
<link rel="stylesheet" href="css/test.css" />

<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook">
            <div style="background-image:url(brochure/Brochure_Main.jpeg)"></div>
            <div style="background-image:url(brochure/Brochure_Mobile_Ordering.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Automobile.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Beauty_Wellness.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Food_Beverage.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Hair_Salon.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Minimart.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Mobile_Phone_Shop.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Retail.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Wholesale.jpg)"></div>

<div class="buttons">
        <button type="button" onclick="thePreviousPage()" class="button">Previous</button>
        <button type="button" onclick="theHomePage()" class="button">Home</button>
        <button type="button" onclick="theNextPage()" class="button">Next</button>

<script type="text/javascript">
theWindowHeight = $(window).height();
theWindowWidth = $(window).width();
    // Create the flipbook


            // Width

            width: theWindowWidth*0.9,

            // Height


            // Elevation

            elevation: 50,

            // Enable gradients

            gradients: true,

            // Auto center this flipbook

            autoCenter: true



  function thePreviousPage()

  function theHomePage()

  function theNextPage()



This is the css:


    height:100% !important;
    overflow-anchor: none;

.flipbook-viewport .container{
  position: absolute;
  margin: auto;
  top: 45%;
  left: 37%;
  height: 100%;
  width: 100%;

.flipbook-viewport .flipbook{
  top: -30%;
  left: -32%;

  transform: translate(-50%, -50%);

.flipbook-viewport .page{
    background-size:100% 100%;

.flipbook .page{
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.2);
    box-shadow:0 0 20px rgba(0,0,0,0.2);

.flipbook-viewport .page img{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

.flipbook-viewport .shadow{
    -webkit-transition: -webkit-box-shadow 0.5s;
    -moz-transition: -moz-box-shadow 0.5s;
    -o-transition: -webkit-box-shadow 0.5s;
    -ms-transition: -ms-box-shadow 0.5s;

    -webkit-box-shadow:0 0 20px #ccc;
    -moz-box-shadow:0 0 20px #ccc;
    -o-box-shadow:0 0 20px #ccc;
    -ms-box-shadow:0 0 20px #ccc;
    box-shadow:0 0 20px #ccc;

    position: absolute;
    align-items: center;
    left: 50%;
    bottom: 10%;

How do I ensure that the contents will not shift up after the page refreshes?


You just need to do some css updates, here are the few css classes are updated,

.flipbook-viewport {
    overflow: hidden;
    width: 100%;
    height: 100% !important;
    overflow-anchor: none;
    top: 100px;
    position: relative;
.flipbook-viewport .container {
    position: relative;
    margin: auto;
    top: 45%;
    left: 37%;
    height: 100%;
    width: 100%;
.flipbook-viewport .flipbook {
    left: auto;
    top: auto;