title: Slidesjs script: setting a min-width to get an 100% width look
body: <p>My client wants a "wide screen" look for their slideshow on the front page. The background image is really wide, as in 1700~px wide. The content is designed so that the data has a 960px min-width (I use a "margin: 0 auto;" to center things).</p>
  
  <p>CSS:</p>
  
  <pre><code>    #rotate {
      height: 487px;
      min-width: 960px;
      margin: 0 auto;}
      .slides_container {
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      display: none;
  }
  
  /*
      Each slide
      Important:
      Set the width of your slides
      If height not specified height will be set by the slide content
      Set to display block
  */
  .slides_container div {
      width: 960px;
      height: 487px;
      display: block;}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="rotate"&gt;
  
  &lt;div id="container"&gt;
      &lt;div id="slides"&gt;
          &lt;div class="slides_container"&gt;
              &lt;!-- These are the divs that "slide" --&gt;
              &lt;div style="min-width: 960px; background: url(images/rotate-bg.jpg) center no-repeat;"&gt;
                  &lt;div style="margin: 0 auto; width: 960px;"&gt;Test 1&lt;/div&gt;
              &lt;/div&gt;
              &lt;div style="min-width: 960px; background: url(images/about-markshare-graph.png) center no-repeat;"&gt;
                  &lt;div style="margin: 0 auto; width: 960px;"&gt;Test 2&lt;/div&gt;
              &lt;/div&gt;
                              &lt;!-- End of sliding divs --&gt;
  
          &lt;/div&gt;
          &lt;a href="#" class="prev"&gt;&lt;img src="images/arrow-prev.png" width="40" height="43" alt="Arrow Prev"&gt;&lt;/a&gt;
          &lt;a href="#" class="next"&gt;&lt;img src="images/arrow-next.png" width="40" height="43" alt="Arrow Next"&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is a link to the site that I can't seem to find the right CSS changes for: <a href="http://www.senjusprinkler.com/2012/index.php" rel="nofollow">http://www.senjusprinkler.com/2012/index.php</a></p>