title: how to set a list of images next to eachother
body: <p>I have a list of images but i want all the images next to each other. and than with horizontal scroll.</p>
  
  <p>I tried to set a max height for the scroll menu but that his hide the 2 images below. I also disabled vertical scroll but that doesn't work to.</p>
  
  <p>If it is possible I want only use css. if I need javascript to fix it I use Jquery.</p>
  
  <p><img src="https://i.stack.imgur.com/sQERU.png" alt="What I have now"></p>
  
  <p>My html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;test&lt;/title&gt;
    &lt;link href="css/index.css" rel="stylesheet"/&gt;
    &lt;link href="css/global.css" rel="stylesheet"/&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="list"&gt;
          &lt;img src="img/1.jpg" class="img"&gt;
          &lt;img src="img/2.jpg" class="img"&gt;
          &lt;img src="img/3.jpg" class="img"&gt;
          &lt;img src="img/4.jpg" class="img"&gt;
          &lt;img src="img/5.jpg" class="img"&gt;
          &lt;img src="img/6.jpg" class="img"&gt;
          &lt;img src="img/7.jpg" class="img"&gt;
          &lt;img src="img/8.jpg" class="img"&gt;
      &lt;/div&gt;
      &lt;div id="output"&gt;
  
      &lt;/div&gt;
      &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="js/image.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>my css:</p>
  
  <pre><code>body{
   padding:0px;
   margin:0px;
   overflow-y:hidden;
  }
  .img{
   height:100px;
   width:200px;
   display:inline-block;
   margin-left:0px;
  }
  
  .loaded{
   width:100%;
  }
  #list{
   overflow-y:hidden;
   width:auto;
  }
  </code></pre>