Home/ Questions/Q 9117581
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T04:55:45+00:00

I have an issue that I have seen come up in a couple different

  • 0

I have an issue that I have seen come up in a couple different sites and I have never been able to find a solution. I have noticed that many other people have had similar issues but every fix that I have seen is not working on the site I am currently working on. Basically what I am trying to do is have a responsive layout with a header that has a repeating background that spans the entire window and a body that has a fixed width. The basic html looks like this:

<html>
<body>
    <div id="header">Header content</div>
    <div id="main-content">Main content here</div>
</body>
</html>

and the css is something like this:

html, body{
      width:100%;
}
#header{
      width:100%;
}
#main-content{
      width:1000px;
}

This code is not meant to be representative of what is actually on the site that I am working on but to give you an idea of what we are trying to do. To see the actual html, css, etc. please go to http://236887.site-show.com/ and take a look at it. The site initially will look fine but if you shrink the size of the window down so that there is a horizontal scroll bar and then scroll to the right and look at the header, you will see that the repeating background is not going to the full width.

One thing that I did find is that removing the width:1000px on the main-content did fix this issue. However, we need that main-content area to be set to that width. I have also tried setting overflows to hidden and setting floats on the header but nothing seems to correct the issue.

This is especially an issue with Android/iOS systems which run on tablets, smartphones, etc. Any help that you can give me on this issue would be much appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The issue is that your main-content div is set at 1000px (with 30px horizontal padding) while your CSS file specifies your header to be 960px. Increasing the width of your header to match your content will correct the problem.

    Here’s the code for the fix:

    .grid-50-50 {
  display: table;
  width: 1030px;
}
    • 0