title: Content Moves when resizing
body: <p>I've started making a website, and would like a banner to sit under my nav bar.
  I originally had both divs positioned exactly how i wanted them, however upon resizing, the right div moved under the left div.
  Both were positioned using float:left and float:right.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt; Welcome &lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="Style1.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
  &lt;div id="header"&gt;
  &lt;div id="topHeader"&gt;
  &lt;div id="logo"&gt;
  &lt;img src="Images/HeaderLogo.png"  alt="Logo for Matt Meadows"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt; &lt;!--End of topHeader --&gt;
  &lt;/div&gt; &lt;!--End of Header --&gt;
  &lt;nav&gt;
  &lt;div id="nav-links"&gt;
  &lt;ul&gt;
  &lt;li&gt;Home&lt;/li&gt;
  &lt;li&gt;Portfolio&lt;/li&gt;
  &lt;li&gt;About&lt;/li&gt;
  &lt;li&gt;Contact&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/nav&gt;
  &lt;div id="contentHeaderContainer"&gt;
  &lt;div id="contentHeader"&gt;
  &lt;img src="Images/HomePageContentHeader.png"&gt;
  &lt;div id="headerText"&gt;
  &lt;h1 id="welcome"&gt;WELCOME&lt;/h1&gt;
  &lt;p class="Text1"&gt;The Way Website Development should be...&lt;/p&gt;
  &lt;p class="Text2"&gt;UNIQUE&lt;/p&gt;
  &lt;p class="Text5"&gt;CONCISE&lt;/p&gt;
  &lt;p class="Text3"&gt;VIBRANT&lt;/p&gt;
  &lt;p class="Text4"&gt;PROFESSIONAL&lt;/p&gt;
  &lt;p class="Text6"&gt;SIMPLE&lt;/p&gt;
  &lt;/div&gt; &lt;!--End of headerText --&gt;
  &lt;/div&gt; &lt;!--End of contentHeader --&gt;
  &lt;/div&gt; &lt;!--End of contentHeaderContainer --&gt;
  &lt;/div&gt; &lt;!--End of wrapper --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body, html
  {
  margin:0;
    height:100%;
    width:100%;
  }
  
  #wrapper
  {
  margin-left: auto;
  margin-right: auto;
  }
  
  #topHeader
  {
  width: 100%;
  height:75px;
  background: rgb(36,36,36); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(36,36,36,1) 0%, rgba(52,52,52,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(36,36,36,1)), color-stop(100%,rgba(52,52,52,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#343434',GradientType=0 ); /* IE6-9 */
  }
  
  #logo
  {
  margin-left: 50px;
  padding-top: 10px;
  }
  
  nav
  {
  float:left;
  width: 100%;
  height: 45px;
  background: url('Images/NavBG.png');
  -webkit-box-shadow: 0px 7px 15px rgba(20, 20, 20, 0.5);
  -moz-box-shadow:    0px 7px 15px rgba(20, 20, 20, 0.5);
  box-shadow:         0px 7px 15px rgba(20, 20, 20, 0.5);
  }
  
  #nav-links
  {
  margin: 0 auto;
  }
  
  ul
  {
  margin:0 auto;
  padding:0;
  list-style:none;
  width: 700px;
  }
  
  li
  {
  display:inline;
  float:left;
  padding: 10px 55px 10px 55px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #CCCCCC;
  -webkit-transition: background 0.5s ease;
  -moz-transition: background 0.5s ease;
  -o-transition: background 0.5s ease;
  transition: background 0.5s ease;
  }
  
  li:hover
  {
  background: #4d4c4c;
  color: #FFF;
  }
  
  #contentHeaderContainer
  {
  height: 450px;
  margin-left: auto;
  margin-right: auto;
  background: rgb(36,36,36); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(36,36,36,1) 0%, rgba(52,52,52,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(36,36,36,1)), color-stop(100%,rgba(52,52,52,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#343434',GradientType=0 ); /* IE6-9 */
  -webkit-box-shadow: 0px 7px 15px rgba(20, 20, 20, 0.5);
  -moz-box-shadow:    0px 7px 15px rgba(20, 20, 20, 0.5);
  box-shadow:         0px 7px 15px rgba(20, 20, 20, 0.5);
  }
  
  
  #contentHeader img
  {
  float:left;
  margin-top: 50px;
  }
  
  
  #headerText
  {
  float:right;
  width: 700px;
  height: 300px;
  }
  
  #welcome
  {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #cccccc
  }
  
  p
  {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  
  .Text1
  {
  color: #999999;
  font-size: 20px;
  font-weight: bold;
  }
  
  .Text2
  {
  color:#8d9999;
  font-size: 22px;
  font-weight: bold;
  margin-left: 100px;
  margin-top: 50px;
  }
  
  .Text3
  {
  color:#8d9999;
  font-size: 22px;
  font-weight: bold;
  margin-left: 350px;
  margin-top: 50px;
  }
  
  .Text4
  {
  color:#8d9999;
  font-size: 22px;
  font-weight: bold;
  margin-left: 100px;
  margin-top: 50px;
  }
  
  .Text5
  {
  float:right;
  color:#8d9999;
  font-size: 22px;
  font-weight: bold;
  margin-top:-50px;
  }
  
  .Text6
  {
  float:right;
  color:#8d9999;
  font-size: 22px;
  font-weight: bold;
  margin-top:-50px;
  }
  </code></pre>
  
  <p>EDIT: <a href="http://jsfiddle.net/w6qxU/" rel="nofollow">http://jsfiddle.net/w6qxU/</a></p>
  
  <p>I would like both child divs within #contentHeaderContainer to remain completely still, even when resizing. E.G when resizing the window, the border of the window moves, yet the content remains absolutely still.</p>