CSS - проблема с изображением при изменении размера окна браузера

Question

В моем примере мне нужно, чтобы заголовок и основной корпус расширялись до полного экрана при расширении окна браузера (теперь он работает). Однако, когда окно браузера уменьшается, оранжевое изображение падает с заголовка и частично переходит в черный цвет. Любая идея, как сохранить оранжевый образ на месте?

Вот мой пример: http://jsfiddle.net/RFMBM/

Мой CSS:

  body { 
       background-color: #e8e8e8; 
       font-family: Arial, Helvetica, sans-serif; 
       font-size:12px; 
       padding: 0; 
       margin: 0;} 
      h1 { 
       padding: 0px; 
       margin: 0px; 
      } 
      #container { 
        margin:0px auto; 
        border:0px solid #bbb; 
        padding:10px; 
        min-width: 990px; 
      } 
      .white-box { 
       width: 180px; 
       margin: 0px; 
      } 
      #main-header { 
       border:1px solid #bbb; 
       height:98px; 
       padding:3px; 
       background-color: #fff; 
       min-width: 930px; 
      } 
      #main-content { 
       margin-top:10px; 
       padding-bottom:10px; 
      } 
      #main-body { 
       margin-left:10px; 
       width:666px; 
       height:150px; 
      } 
      #main-footer { 
       margin-top:10px; 
       margin-bottom:10px; 
       padding:10px; 
       border:1px solid #bbb; 
      } 
      .box { 
       padding: 8px; 
       border: 1px solid silver; 
       -moz-border-radius: 8px; 
       -o-border-radius: 8px; 
       -webkit-border-radius: 5px; 
       border-radius: 8px; 
       background-color: #fff; 
      } 
      .box1 { 
       width: 200px; 
       float: left; 
      } 
      .box2 { 
       margin-left: 224px; 
      } 
      div.left { 
       float: left; 
      } 
      div.right { 
       float: right; 
       margin-right:3px; 
      } 

HTML:

  <div id="main-header"> 
       <div class="left"><img src="http://img89.imageshack.us/img89/2675/logoxnx.gif" border="0" alt=""></div> 
       <div class="right"><img src="http://img199.imageshack.us/img199/9759/banner2b.gif" border="0" alt=""></div> 
      </div> 
      <div id="container"> 
       <div id="main-content"> 
        <div class="box box1"> 
        left 
        </div> 

        <div class="box box2"> 
        <p>Main Body...</p> 
        </div> 
        <div style="clear:both;"></div> 
       </div> 

       <div id="main-footer">Main Footer</div> 
      </div> 

Answer 1

Вам нужно увеличить min-width от #main-header около 950px

http://jsfiddle.net/RFMBM/2/