title: Horizontal scroll css?
body: <p>I want to have one <code>&lt;div&gt;</code> with id that has horizontal scroll, but the problem is it has to be responsive, not with fixed width.</p>
  
  <pre class="lang-css prettyprint-override"><code>html, body {margin: 0; padding: 0;}
  
  #myWorkContent{
      width:530px;
      height:210px;
      border: 13px solid #bed5cd;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
  }
  
  #myWorkContent a {
      display: inline-block;
      vertical-align: middle;
  }
  
  #myWorkContent img {border: 0;}
  </code></pre>
  
  
  
  <pre><code>&lt;div id="myWorkContent"&gt;
       &lt;a href="assets/work/1.jpg"&gt;&lt;img src="http://placekitten.com/200/200/" height="190"&gt;&lt;/a&gt;
       &lt;a href="assets/work/2.jpg"&gt;&lt;img src="http://placekitten.com/120/120/"/&gt;&lt;/a&gt;
       &lt;a href="assets/work/3.jpg"&gt;&lt;img src="http://placekitten.com/90/90/" height="90" width="90"&gt;&lt;/a&gt;
       &lt;a href="assets/work/4.jpg"&gt;&lt;img src="http://placekitten.com/50/50/" height="190"&gt;&lt;/a&gt;
       &lt;a href="assets/work/5.jpg"&gt;&lt;img src="http://placekitten.com/100/100/"&gt;&lt;/a&gt;
       &lt;a href="assets/work/6.jpg"&gt;&lt;img src="http://placekitten.com/200/200/" height="190"&gt;&lt;/a&gt;
  &lt;/div&gt;&lt;!-- end myWorkContent --&gt;
  </code></pre>
  
  <p>Thanks to <a href="http://jsfiddle.net/clairesuzy/FPBWr/" rel="noreferrer">http://jsfiddle.net/clairesuzy/FPBWr/</a></p>
  
  <p>The problem is with that 530px. I would like to use 100% instead. But then I got page scroll and scroll of the DIV goes right, can not get it, any idea?</p>
  
  <p>Here is article in Serbian about solution
  <a href="http://www.blog.play2web.com/index.php?id=18" rel="noreferrer">http://www.blog.play2web.com/index.php?id=18</a></p>