html div width 100,Html div width 100% not functioning

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:

body

{

margin:0;

padding:0;

}

.clear

{

display:block;

clear:both;

}

#header

{

min-height:156px;

width:100%;

background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');

}

#head-contents

{

width:974px;

margin:0 auto;

height:156px;

}

#header ul

{

margin:85px 23px 0 0;

float:right;

list-style-type:none;

}

#header ul li

{

display:inline;

}

#header ul li a

{

margin-left:46px;

font-size:19px;

color:#fff;

text-decoration:none;

}

#header ul li a:hover ,

#header ul li a.active

{

color:#FD7600

}

• Home
• Products
• About
• Contact