Question

I am putting together a HTML5 page. I notice that divs without specified widths within elements such as “header” and “footer” only fill the width of the window. So, if for example you have:

<header>
   <div id="header-background" style="background: #ddd">
      <h1 style="width:960px">Hello World</h1>
   </div>
</header>

And you reduce the size of the window to below 960px (e.g. 600px) and scroll horizontally, the “header-background” will only stretch to 600px, and to the right will be a white space.

You can see this in action even at stackoverflow.com

Is there a way around this?

Answer 1

Any block level element will take up 100% of the page width by default. If you have a width that you can’t ( or don’t want to ) go under, then you can use min-width

header { 
    min-width: 960px;
    width: auto; 
}