title: Keep full width slider inside div
body: <p>I am making a full width slider but with an specific height (500px). This slider goes after the menu and I am trying to keep the slider inside a div, but it's not working, the content floats outside the div. How can I keep the content wrapped inside div?</p>
  
  <p>Here is my code.</p>
  
  <p><strong>HTML</strong> </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="container"&gt;
      &lt;div id="header"&gt;
          &lt;h1&gt;Easy Slider jQuery Plugin - continuous demo&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="content"&gt;
          &lt;div id="slider"&gt;
              &lt;ul&gt;                
                  &lt;li&gt;&lt;a href="http://templatica.com/preview/30"&gt;&lt;img src="images/01.jpg" alt="Css Template Preview" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://templatica.com/preview/7"&gt;&lt;img src="images/02.jpg" alt="Css Template Preview" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://templatica.com/preview/25"&gt;&lt;img src="images/03.jpg" alt="Css Template Preview" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://templatica.com/preview/26"&gt;&lt;img src="images/04.jpg" alt="Css Template Preview" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://templatica.com/preview/27"&gt;&lt;img src="images/05.jpg" alt="Css Template Preview" /&gt;&lt;/a&gt;&lt;/li&gt;          
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p><br>
  <strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>#container {    
      margin: 0 auto;
      position: relative;
      text-align: left;
      width: 696px;
      background: #fff;       
      margin-bottom: 2em;
  }   
  #header {
      height: 80px;
      line-height: 80px;
      background: #5DC9E1;
      color: #fff;
  }               
  #content{
      position: relative;
  }           
  
  /* Easy Slider */
  #slider ul, #slider li,
  #slider2 ul, #slider2 li {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  #slider2 {
      margin-top: 1em;
  }
  #slider li, #slider2 li { 
      /* 
          define width and height of list item (slide)
          entire slider area will adjust according
          to the parameters provided here
      */ 
      width: 100%;
      height: 500px;
      overflow: hidden; 
  }
  
  #prevBtn, #nextBtn,
  #slider1next, #slider1prev { 
      display: block;
      width: 30px;
      height: 77px;
      position: absolute;
      left: -30px;
      top: 71px;
      z-index: 1000;
  }   
  #nextBtn, #slider1next { 
      left: 696px;
  }                                                       
  #prevBtn a, #nextBtn a,
  #slider1next a, #slider1prev a {  
      display: block;
      position: relative;
      width: 30px;
      height: 77px;
      background: url(../images/btn_prev.gif) no-repeat 0 0;  
  }   
  #nextBtn a, #slider1next a { 
      background: url(../images/btn_next.gif) no-repeat 0 0;  
  }   
  </code></pre>