CSS - issue with re-sizing screen

Question

I'm stuck with two issues here:

1) Both headers should stretch to the whole screen. In the second header banner floats to the right too much during screen re-size. It should stop within 1200px width

2) I also can't put the menu item in the appropriate place like on the attached picture - they always drop below.

Any help would be greatly appreciated!

Jsfiddle example

Screen shot: I posted a screen shot here 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

Here's my solution for your layout using flexboxes. I created an .inner div that you can use to specify the min and max widths of the layout.

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html, body {
  background: #F1F1F1;
  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border: none;
  width: 100%;
  height: 100%;
}

header, main {
  padding: 0px 40px;
}

.inner {
  margin: 0px auto;
  width: 100%;
  min-width: 400px;
  max-width: 1200px;
}

.main-header {
  background: #DFE5F3;
}

.main-header .inner {
  display: flex;
  justify-content: space-between;
}

.main-header nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.main-header nav a {
  margin-left: 20px;
  text-decoration: none;
}

.ad-header {
  background: #FFF;
  text-align: right;
}

.ad-header img {
  max-width: 100%;
}

main .inner {
  display: flex;
  padding: 20px 0px;
}

.box {
  padding: 20px;
  background: #FFF;
  border-radius: 4px;
  border: 1px rgba(0, 0, 0, 0.2) solid;
}

.box1 {
  flex-shrink: 0;
  margin-right: 20px;
  width: 180px;
}

.box2 {
  width: 100%;
}

<header class="main-header">
  <div class="inner">
    <h1>My Logo</h1>
    <nav>
      <a href="#">Menu 1</a>
      <a href="#">Menu 2</a>
      <a href="#">Menu 3</a>
    </nav>
  </div>
</header>

<header class="ad-header">
  <div class="inner">
    <img src="http://lorempixel.com/655/80/abstract/" />
  </div>
</header>

<main>
  <div class="inner">
    <div class="box box1">
      <h2>Categories</h2>
    </div>

    <div class="box box2">
      <h2>Page Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec pretium ipsum. Nullam scelerisque sem eros, in varius est laoreet a. Curabitur sodales urna ac mollis rutrum. In non pretium arcu, ac dictum erat. Praesent interdum erat mauris, nec condimentum nisi dignissim at. Nam ullamcorper risus sed consequat blandit. Cras tempus sem mauris, eget lacinia risus suscipit quis. Quisque vehicula eu metus sit amet sagittis. Nam ornare nibh eu nulla bibendum consequat eleifend sed arcu.</p>
    </div>
  </div>
</main>

Answer 2

Please create file html before copy html+css to check it: 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%;
}
}