title: Position Div below absolute positioned image
body: <p>I'm creating a website for a friend. However I want to position a div containing 4 sections underneath an image absolute positioned. This has to be the case as I want it to resize with the change in window size without using any javascript. Can anyone think of a way to do this.</p>
  
  <p>Heres the page:</p>
  
  <p><a href="https://dl.dropboxusercontent.com/u/24713212/0001_Adam_Plowdem_Videography/html/index.html" rel="nofollow">https://dl.dropboxusercontent.com/u/24713212/0001_Adam_Plowdem_Videography/html/index.html</a></p>
  
  <p>Basically I want the brightly coloured sections to start right after the image whatever the browser size.</p>
  
  <p>Really appreciate any help, thanks,</p>
  
  <p>Matt</p>
  
  <pre><code>&lt;style&gt;
  
  body{
  width: 99%;
  height: 1050px;
  background-color: #FFF;
  font: 80%/1.65 "Open Sans", sans-serif;
  }
  
  #header{
  width: 100%;
  height: 50px;
  position: fixed;
  top:0;
  left:0;
  background-color: #FFF;
      /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
  /* Opera */
  background-image: -o-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EBE8E4));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom, #FFFFFF 0%, #EBE8E4 100%);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  }
  
  #nav{
  width: 600px;
  position: absolute;
  top: 0;
  right:0;
  height: 50px;
  margin-right: 20px;
  
  }
  
  #nav ul{
  list-style: none;
  height: 50px;
  position: absolute;
  top: 0;
  margin: 0;
  display: block;
  right:0 !important;
  }
  
  #nav li{
  display: inline-block;
  height: 50px;
  border-bottom: none;
  text-transform: uppercase;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  
  #nav li a{
  display: block;
  height: 50px;
  padding-top: 16px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0px !important;
  border-bottom: none;
  color: #000;
  text-decoration: none;
  /*text-transform: uppercase;*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  
  #nav a:hover{
  color: #000;
  background: rgba(0,0,0,0.1);
  -webkit-transition: all 0.15s ease-out 0;
  -moz-transition: all 0.15s ease-out 0;
  transition: all 0.15s ease-out 0;
  }
  
  .banner {
  height: 100%;
  width: 100%;
  color: #fff;
  text-align: center;
  background: url(img/adam.jpg) center center;
  background-size: cover;
  position:absolute;
  top:50;
  left:0;
  z-index:-2;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  -webkit-box-shadow: rgba(200,200,200,0.9) 0 4px 10px -1px;
  box-shadow: rgba(200,200,200,0.9) 0 4px 10px -1px;
  /*position: relative;
  margin-top: -60px;*/
  }
  
  .overlay {
  height: 100%;
  width: 100%;
  color: #fff;
  text-align: center;
  background: url(img/overlay.png) center center;
  background-size: cover;
  position:absolute;
  top:50;
  left:0;
  z-index:-1;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  /*position: relative;
  margin-top: -60px;*/
  }
  
  
  .about {
  min-height: 170px;
  padding: 30px 20px 30px 20px;
  text-align: center;
  background: red;
  display: block;
  }
  
  .about2 {
  min-height: 170px;
  padding: 30px 20px 30px 20px;
  text-align: center;
  background: blue;
  display: block;
  }
  
  .about3 {
  min-height: 170px;
  padding: 30px 20px 30px 20px;
  text-align: center;
  background: yellow;
  display: block;
  }
  
  .about4 {
  min-height: 170px;
  padding: 30px 20px 30px 20px;
  text-align: center;
  background: green;
  display: block;
  }
  
  #container{
  background-color: red;
  margin: auto;
  padding: 0;
  width: 1000px;
  height: 70%;
  }
  
  
  &lt;/style&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;!-- Start Navigation --&gt;
  &lt;div id="header"&gt;
      &lt;div id="nav"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;about&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;work&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;gallery&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;blog&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End Navigation --&gt;
  
  &lt;!-- Start Main Image --&gt;
  
  &lt;section class="banner" style="height: 100%;"&gt;
  &lt;/section&gt;
  
  &lt;!-- End Main Image --&gt;
  &lt;div style="width: 99%;
  height: 100%;"&gt;
  &lt;section class="about"&gt;
    &lt;h5&gt;Hello World&lt;/h5&gt;
  &lt;/section&gt;
  &lt;section class="about2"&gt;
    &lt;h5&gt;Hello World&lt;/h5&gt;
  &lt;/section&gt;
  &lt;section class="about3"&gt;
    &lt;h5&gt;Hello World&lt;/h5&gt;
  &lt;/section&gt;
  &lt;section class="about4"&gt;
    &lt;h5&gt;Hello World&lt;/h5&gt;
  &lt;/section&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>