Home/ Questions/Q 7523197
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T02:43:36+00:00

I have a webpage where I have a header section and then some content.

  • 0

I have a webpage where I have a header section and then some content. In the content, I have a grid and some of the views show many columns which (depending on the screen size) will create a horizontal scroll bar on the browser)

my html looks like sort of like this:

 <head></head>
 <body>
      <div id="TopHeader"></div>
      <div id="MainContent"></div>
 </body>

so often the content that is inside of “MainContent” is wider than the screen . Right now I have my css for my div like this:

 #TopHeader {
    background-color: black;
}

but when I scroll over to the right, the background of this section is white. I tried to solve this by doing this:

#TopHeader {
min-width:1150px;
    background-color: black;
 }

which helps a little bit but this is a hard coded solution and if the width happens to be > 1150px, I run into the same problem.

The only other thing I can think of is to put TopHeader inside of main (which will fix this). something like this:

 <head></head>
 <body>
      <div id="MainContent">
            <div id="TopHeader"></div>
       </div>
 </body>

but the issue there is that I want padding around my content (what was the MainContent section and I don’t want this padding around the top header so that doesn’t seem to work. If i create a new div like this

 <head></head>
 <body>
      <div id="MainContent">
            <div id="TopHeader"></div>
            <div id="InnerMainForPadding"></div>
       </div>
 </body>

I am back to the original problem listed above.

Any suggestions ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How about having the scroll bar on the content wrapper instead of the browser window?

    #MainContent {
    overflow: auto;
}

    Live demo: http://jsfiddle.net/SUfkh/2/show/

    • 0