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

您需要将#main-header的min-width增加到950px左右

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