title: Adjust margins depending on browser's window size
body: <p>I have a series of images in an scrolling horizontal layout. There's a margin between the images. I'm using a jQuery script that takes care of resizing the images depending on the browser's window size. My question is, how can I adjust the margin between the images, too?</p>
  
  <p>I need the design to be totally fluid, so media queries are not a solution in this case.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="page"&gt;
      &lt;div id="header"&gt;
      &lt;/div&gt; 
      &lt;div id="slides"&gt;
          &lt;div class="slide"&gt;&lt;img src="image01.jpg" /&gt;&lt;/div&gt;
          &lt;div class="slide"&gt;&lt;img src="image02.jpg" /&gt;&lt;/div&gt;
          &lt;div class="slide"&gt;&lt;img src="image03.jpg" /&gt;&lt;/div&gt;
          ....
          &lt;div class="slide"&gt;&lt;img src="imageN.jpg" /&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#slides {
      width: 100%;
      white-space: nowrap;
  }
  
  .slide {
      display: inline-block;
      margin-right: 20px;
      vertical-align: top;
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>jQuery(document).ready(function($){
  
      var $window = $(window),
          $header = $('#header'),
          $footer = $('#footer');
  
      var getHorizontalPageHeight = function () {
          return $window.height() - $header.outerHeight() - $footer.outerHeight();
      };
  
      var $slides = $('#slides'),
          $items = $slides.find('img, iframe');
  
      $items.each(function () {
          var $item = $(this),
              width = $item.data('width') || $item.attr('width') || 1,
              height = $item.data('height') || $item.attr('height') || 1;
          $item.data({
              height: height,
              ratio: width / height
          });
      });
  
      var resizer = function () {
  
          var contentHeight = getHorizontalPageHeight(),
              windowWidth = $window.width(),
              windowHeight = $window.height();
  
          $items.each(function () {
  
              var $item = $(this),
                  originalHeight = $item.data('height'),
                  height = contentHeight &gt; originalHeight ? originalHeight : contentHeight,
                  width,
                  ratio = $item.data('ratio');
  
                  width = height * ratio;
  
                  $item.css({
                      width: width,
                      maxWidth: 'none',
                      height: width / ratio
                  });
  
          });
  
      };
  
      $window.on('resize', resizer);
      resizer();
  
  });
  </code></pre>
  
  <p>Thanks in advance</p>