title: Can't put any div's under image slider
body: <p>I can't position div's under my image slider. They all go above the slider as if the slider isn't within  the container. Whenever I try to put another div under the wrapper the position is completely off. Is it because I have the slider in a wrapper div?</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div class="container" id="container-1"&gt;
  
      &lt;!--Navigation Begin--&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav"&gt;
      &lt;div class="container"&gt;
  
          &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
          &lt;button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;a class="navbar-brand" href="/"&gt;&lt;img src="../Images/nav-logo.png" alt="Breakday Charters Logo"&gt;&lt;/a&gt;
  
          &lt;div class="nav-collapse collapse navbar-responsive-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Booking&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Report&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;Contact&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
  
      &lt;ul class="nav navbar-nav pull-right"&gt;
        &lt;h3 id="number-head"&gt;Get Hooked&lt;/h3&gt;
        &lt;p id="nav-number"&gt;(252)xxx-xxxx&lt;/p&gt;
        &lt;li&gt;&lt;img src="../Images/hook.png" alt="hook" id="nav-hook"/&gt;&lt;/li&gt;
      &lt;/ul&gt;
              &lt;/ul&gt;&lt;!-- end nav pull-right --&gt;
          &lt;/div&gt;&lt;!-- end nav-collapse --&gt;
  
      &lt;/div&gt;&lt;!-- end container --&gt;
  &lt;/div&gt;&lt;!-- end navbar --&gt;
  
  &lt;!--================Carousel===============--&gt;
  
  &lt;div id="wrapper"&gt;
      &lt;div id="carousel"&gt;
          &lt;img src="../Images/Carousel/breakday-boat-lrg.png"alt="Breakday Charters Boat" width="990" height="450" class="img-responsive" /&gt;
          &lt;img src="../Images/Carousel/turtle.png" alt="turtle" width="990" height="450" class="img-responsive"/&gt;
          &lt;img src="../Images/Carousel/justin-and-fish.png" alt="Captain Justin" width="990" height="450" class="img-responsive" /&gt;
          &lt;img src="../Images/Carousel/shark.png" alt="shark" width="990" height="450" class="img-responsive"  /&gt;
      &lt;/div&gt;
      &lt;a href="#" id="prev" title="Show previous"&gt; &lt;/a&gt;
      &lt;a href="#" id="next" title="Show next"&gt; &lt;/a&gt;
      &lt;div id="pager"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!--wrapper div end--&gt;
  
  &lt;/div&gt;&lt;!--container--&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>html, body {
      height: 100%;
      padding: 0;
      margin: 0;
  }
  
  /*Navigation*/
  #custom-nav {
      min-height:85px;
      background: #FFF;
      border-bottom:#0e76bc medium solid;
  }
  
  .nav.navbar-nav li a {
      color: #0E76BC;
      margin-top:25px;
      font-size:15px;
  }
  
  .nav.navbar-nav li a:hover {
      color: #494238;
  }
  
  .nav.navbar-nav.pull-right li #nav-hook {
      position: absolute;
      z-index: 1031;
      top: -40px;
  }
  .nav.navbar-nav.pull-right #nav-number {
      font-size: 16px;
      color: #333;
      font-weight: bold;
  }
  .nav.navbar-nav.pull-right #number-head {
      font-weight: bold;
      color: #0e76bc;
  }
  .nav.navbar-nav.pull-right {
      margin-top: 5px;
  }
  
  /* --------------------------------------
     Carousel
     -------------------------------------- */
  
  #wrapper {
      background-color: #fff;
      width: 100%;
      height: 450px;
      margin-top: -225px;
      overflow: hidden;
      position: absolute;
      top: 40%;
      left: 0;
  }
  #carousel img {
      display: block;
      float: left;
      clear:right;
  }
  #prev, #next {
      background-color: rgba(255, 255, 255, 0.7);
      display: block;
      height: 450px;
      width: 50%;
      top: 0;
      position: absolute;
  }
  #prev:hover, #next:hover {
      background-color: #fff;
      background-color: rgba(255, 255, 255, 0.8);
  }
  #prev {
      left: -495px;
  }
  #next {
      right: -495px;
  }
  #pager {
      margin-left: -470px;
      position: absolute;
      left: 50%;
      bottom: 10px;
  }
  #pager a {
      border: 2px solid #fff;
      border-radius: 10px;
      display: inline-block;
      width: 10px;
      height: 10px;
      margin: 0 5px 0 0;
  }
  #pager a:hover {
      background-color: rgba(255, 255, 255, 0.5);
  }
  #pager a span {
      display: none;
  }
  #pager a.selected {
      background-color: #fff;
  }
  </code></pre>