Question

I’m working on a website that has a header that stretches all the way across the page, like the header bar on this and other SE sites. While testing my CSS on different resolutions and browser sizes, I noticed that the element will only fill up the user’s browser if the browser is smaller that the page size. For instance, if the browser window is smaller than 960px wide (the width of the main container of my site) and horizontal scroll bar appears, the header will only fill up the space currently on the screen and doesn’t stretch to the rest of the page that’s accessible via the scroll bar.

I turns out that I’m not the only one who suffers from the problem: StackOverflow and other SE sites have the same problem.

What can I do to fix this?

Answer 1

The trick is to set the element to 100% width and include a min-width that’s as wide as your widest site element.

Take the following example:

<div id="header">
  <!-- Exciting header links -->
</div>

<div id="content">
  <!-- Content that will be at most 1000px wide -->
</div>

The CSS you’d use is:

#header {
  width: 100%;
  min-width: 1000px;
}

This works because when the header will always take up 100% of the available space and be at least 1000px wide. This prevents a horizontal scrollbar generated by wide content making it look like the header ends too early.