Html div width 100% not functioning

Question

There are some problems with my HTML, so I am posting the code. The first tag is a `div` with `id="header"`. I have given it 100% width and given it a background image. Inside the header there's another `div` with `id="header-contents"`. I want it centered on the page so I have given it a width and then `margin:0 auto`. It works fine with the max-sized browser but when I zoom in or resize the browser width to about half, the background of the header div starts to disappear at some point and does not fill in 100% width. This is how it looks at first (and should always look): This is how it looks when I zoom or resize the browser: What is the proper HTML and CSS for it? Here's the code: ```

Accepted Answer

I have found the solution:

```
#header {
  height: 156px;
  min-width: 990px;
  background-image: url('http://www.webdesignideas.org/images/bellevueBg.gif');
  display: block;
}

#head-contents {
  width: 974px;
  margin: 0 auto;
  height: 156px;
}
```

It's all a matter of min-width in the #header. I checked out facebook's login page and figured it out.

Html div width 100% not functioning

Solution

Problem