Search code examples
cssskeleton-css-boilerplate

What's causing the body tag to widen?

I'm using Skeleton CSS Boilerplate

Two different pages of my website, similarly structured, are slightly laterally shifted away from each other. This is causing a jarring effect in the navigation bar when navigating from one page to the other.

Upon investigation, I noticed in the Chrome Dev Tools CSS inspector that the body tag of each page is a different width.

CSS inspector in Chrome Dev Tools shows body tag is 1349px wide CSS inspector in Chrome Dev Tools shows body tag is 1366px wide

The structure of both pages is the same, shown below. The class .wrap has a max width of 960px, and all the content is contained within .container .wrap.

<body>
<?php
    require 'navsub.php';
?>
<div class="container wrap" id="singlepageajax">



</div>
<?php
  include 'footer.php';
?>
</body>

So... what could be causing the body tags to be different widths?

Solution

  • Add the following CSS code

    html, body {
    height: 100%;
    overflow: hidden;
}

    then add a <div id="container-wrapper"> to wrap up the container

    place its CSS like

    #container-wrapper {
    height: 100%;
    overflow-x: auto;
    position: absolute;
    width: 100%;
}

    this will enables the scrolling again