My header does not shrink with window

HTML & CSS
1

Hello, I’m a newbie to web design. I developed a header for my site using a sitebranding div and a sitephoto div nested inside a header div. I positioned them by floating the left div and giving the right div a margin. When I shrink the browser window, the page does not shrink to fill the window, instead it gives scroll bars. How can I fix this problem, or is there a better way to create my header?? Here is my css and html. Thank you!!!

css

html, body {
margin: 0;
padding: 0;
}

#header {
   margin: 0 auto;
   width: 100%;
   height: 210px;
   background-color: light-purple;
   padding:0;
   border: 0 solid red;
   overflow: auto;
}

#sitebranding {
background-color: #ff9900;
border-top: 5px inset #ff9900;
border-bottom: 5px inset #ff9900;
width: 400px;
height: 200px;
margin: 0;

}

#sitebranding h1 {
font-family: Palatino, Georgia, Helvetica, sans-serif;
font-size: 300%;
font-weight: bold;
color: white;
margin: 10px;
padding-left: 50px
padding-right: 20px;
padding-bottom: 5px;
padding-top: 75px;
width: 350px;
height: 100px;
}

.clear { clear: both;}


#sitephoto {
border-top: 5px inset #ff9900;
border-bottom: 5px inset #ff9900;
width: 603px;
height: 200px;
margin: 0;
padding:0;
}


#sitebranding {
   float:left;
}

#sitephoto {
  margin-left: 400px;
}

html

<body>

  
  <div id="header">
   
    <div id="sitebranding">
      <h1>jamhenkle.com</h1>  
    </div>
    <div id="sitephoto">
      <img src="pinnacles.jpg" width="603px" height="200px" alt="The Pinnacles at Mulu National Park, Borneo"/>
    </div> 
     <div style="clear: both"></div>
   </div> <!-- end of header div -->

     </body>


 </html>
2

If you remove the overflow: auto from the header styles, the scroll bars will go away.

#header {
margin: 0 auto;
width: 100%;
height: 210px;
background-color: light-purple;
padding:0;
border: 0 solid red;
[COLOR="Red"]overflow: auto;[/COLOR]
}

Could you just clarify how you want the header to behave? If you want the header to stay fully on screen when the viewport is narrow, you can set it to width: 100% as you’ve done, but then you really don’t want to set widths on the bits inside, which can be tricky.

3

Removing the overflow:auto alone did not work. Under my #sitebranding I added a overflow:hidden command and it fixed the problem. I just didn’t want extra scroll bars for the header to appear inside the scroll bars for the entire window. I also moved the overflow:auto under the #body command for desired effects. Thank you.