html - CSS - 调整屏幕大小的问题

Question

我在这里遇到了两个问题:

1) 两个标题都应该延伸到整个屏幕。在屏幕调整大小时，第二个标题横幅向右浮动太多。它应该在 1200 像素宽度内停止

2) 我也无法像附图那样将菜单项放在适当的位置 - 它们总是放在下面。

如有任何帮助，我们将不胜感激!

Jsfiddle example

屏幕截图:我在这里发布了一个屏幕截图 http://oi57.tinypic.com/2v3rhn6.jpg

    body,p,input {font-family:verdana,helvetica,arial,sans-serif;}
img {border:0;}

body {
    font-size:14px;color:#555555;background-color:#f1f1f1;margin:0px;}
h1 {
    padding: 0px; 
    margin: 0px;
    color:#000000;
}

#container {
        margin:0px auto;
        border:0px solid #bbb;
        padding:4px;
        width:1200px;
}
.logo {
        margin:0px auto;
        border:0px; 
        padding:4px;
        width:1200px;
}

.white-box {
    width: 180px; 
    margin: 0px;
}

#main-header {
    height:50px;
    background-color: #dfe5f2;
    min-width: 1200px;
}
#ad-header {

    height:96px;
    background-color: #fff;
    min-width: 1200px;

}


#top-banner {

    float: right;
    margin: 0 auto;
    padding:3px;


}
.left-banner {
    width: 160px;
    margin: 0 auto;
    padding:3px;
}
#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;
    font-family: Verdana, Arial, Helvetica, sans-serif; color: #000;
    font-size:11px;
    text-align: center;
}   
.box {
    padding: 8px;
    border: 1px solid silver;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
}
.box1 {
    font-size:12px;
    width: 180px;
    float: left;
}
.box1 h3 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
.box1 ul {margin:0;padding:0;list-style:none;}
.box1 li {margin-left:10px;padding:2px;list-style-type:none;}
.box1 li a {text-decoration:none;}
.box1 li a:hover {text-decoration:underline;}
.box1 li span, .leftmenucheckcount {font-size:.95em;}

.box2 {
    margin-left: 210px;
    padding: 15px;
}
#top-menu-black {
    height:12px;
    background-color: #000;
    min-width: 1200px;
}
#top-menu-white {
    height:1px;
    background-color: #fff;
    min-width: 950px;
}
#top-menu-orange {
    height:3px;
    background-color: #ff9401;
    min-width: 950px;
}
.top-menu-text {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    color: #FFFFFF; 
    font-size:10px;
    font-weight: bold;
    padding:4px 4px 4px 230px;
    min-width: 900px;
}
.top-menu-text a{text-decoration: none; color: #FFFFFF;}
.top-menu-text a:link {text-decoration: none; color: #FFFFFF;}
.top-menu-text a:visited {text-decoration: none; color: #FFFFFF;}
.top-menu-text a:active {text-decoration: none; color: #FFFFFF;}
.top-menu-text a:hover {text-decoration: none; color: #ff9401;}

a:link {color:#004eff; }
a:visited {color:#004eff; }
a:active {color:#004eff; }
a:hover {color:#ff9401;}

.article {background-color: #f6f6f6;}

img.imagerating {
    vertical-align:middle
}

.TextWrap {
    float: left;
    margin: 10px;
}
.amz-button {
    margin-left: 150px;
}
.amz-button2 {
    margin-left: 450px;
}
.bottom-amz {
    margin-left: 5px;
}

Answer 1

复制html+css前请创建html文件进行检查:HTML:

<div id="main-header">
<div class="wrap-content">
<div class="logo"><h2>My Logo</h2></div>
<ul id="menu-top">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="ad-header" >
<div id="top-banner" class='wrap-content'><img src="http://4.bp.blogspot.com/-_wuIlLnLxsE/UioXtYApP7I/AAAAAAAABtY/-0bLO3etYa4/s1600/728x90_ELP_NewBanner_r2.gif" alt=""></div>
</div>
<div id="container">
<div id="main-content" class='wrap-content'>
<!-- left column -->
<div class="box box1">
<h3><span>Categories</span></h3>
<br>
<div class="left-banner"></div>
<div style="clear:both;"></div>
</div>
<!-- left column -->
<div class="box box2">
<p><h1>Page Title</h1>
<br>
</p>
<p>Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
</p>
</div>
<div style="clear:both;"></div>
</div>
<!-- footer --> 
<div id="main-footer">Footer</div>
<!-- footer --> 
</div>

CSS:

body,p,input {font-family:verdana,helvetica,arial,sans-serif;}
img {border:0;}

body {
font-size:14px;color:#555555;background-color:#f1f1f1;margin:0px;}
h1 {
padding: 0px; 
margin: 0px;
color:#000000;
}

#container {
margin:0px auto;
border:0px solid #bbb;
padding:4px;
/*  width:1200px;*/
}
.logo {
margin:0px auto;
border:0px; 
padding:4px;
float: left;
}

.white-box {
width: 180px; 
margin: 0px;
}

#main-header {
height:50px;
background-color: #dfe5f2;
}
#ad-header {

height:96px;
background-color: #fff;

}


#top-banner {

margin: 0 auto;
padding:3px;


}
#top-banner img{
float: right;
}
.left-banner {
width: 160px;
margin: 0 auto;
padding:3px;
}
#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;
font-family: Verdana, Arial, Helvetica, sans-serif; color: #000;
font-size:11px;
text-align: center;
}   
.box {
padding: 8px;
border: 1px solid silver;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
}
.box1 {
font-size:12px;
width: 180px;
float: left;
}
.box1 h3 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
.box1 ul {margin:0;padding:0;list-style:none;}
.box1 li {margin-left:10px;padding:2px;list-style-type:none;}
.box1 li a {text-decoration:none;}
.box1 li a:hover {text-decoration:underline;}
.box1 li span, .leftmenucheckcount {font-size:.95em;}

.box2 {
margin-left: 210px;
padding: 15px;
}
#top-menu-black {
height:12px;
background-color: #000;
min-width: 1200px;
}
#top-menu-white {
height:1px;
background-color: #fff;
min-width: 950px;
}
#top-menu-orange {
height:3px;
background-color: #ff9401;
min-width: 950px;
}
.top-menu-text {
font-family: Verdana, Arial, Helvetica, sans-serif; 
color: #FFFFFF; 
font-size:10px;
font-weight: bold;
padding:4px 4px 4px 230px;
min-width: 900px;
}
.top-menu-text a{text-decoration: none; color: #FFFFFF;}
.top-menu-text a:link {text-decoration: none; color: #FFFFFF;}
.top-menu-text a:visited {text-decoration: none; color: #FFFFFF;}
.top-menu-text a:active {text-decoration: none; color: #FFFFFF;}
.top-menu-text a:hover {text-decoration: none; color: #ff9401;}

a:link {color:#004eff; }
a:visited {color:#004eff; }
a:active {color:#004eff; }
a:hover {color:#ff9401;}

.article {background-color: #f6f6f6;}

img.imagerating {
vertical-align:middle
}

.TextWrap {
float: left;
margin: 10px;
}
.amz-button {
margin-left: 150px;
}
.amz-button2 {
margin-left: 450px;
}
.bottom-amz {
margin-left: 5px;
}
.wrap-content{
width: 1200px;
margin: auto;
}
#menu-top {
float: right;
list-style: outside none none;
margin: 0;
padding: 0;
}
#menu-top > li {
float: left;
margin: 16px;
}

@media only screen and (max-width: 1199px){
.wrap-content{
width: 100%;
}
}