title: Need to have images listed horizontally instead of vertical
body: <p>I'm trying to create a very simple jquery slider, instead of using one of the millions probably out there. So I have almost finished it, but I have a problem. I'm using jquery's animate to move the images, and I need to show all images on the same horizontal line to get the script working. Now, they're listed vertically, and I've been thinking this for 2 hours now. So here's the HTML:</p>
  
  <pre><code>&lt;div id="gallery-wrap"&gt;
  &lt;div id="gallery"&gt;
      &lt;img class="galleryimage" src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" /&gt;
      &lt;img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" /&gt;
      &lt;img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" /&gt;
      &lt;img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" /&gt;
      &lt;img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" /&gt;
      &lt;img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" /&gt;
  &lt;/div&gt;
  &lt;div id="gallery-controls"&gt;
  &lt;a id="gallery-prev" href="#"&gt;&lt;img alt="" /&gt; &lt;/a&gt;
  &lt;a id="gallery-next" href="#"&gt;&lt;img alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="clear: both;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>    #gallery-wrap{margin: 0 auto; overflow: visible; width: 100%; position: relative; height:300px; border:1px solid black; border-radius:6px; z-index:3;}
  #gallery{position: relative; left: 0; top: 0; width:100%;}
  .galleryimage{float:left; width:100%; height:300px;}
  
  #gallery-controls{width: 100%; z-index:4;}
  #gallery-prev{position:absolute; left:0px; top:0px; width:50%; height:300px; background-color:rgba(77,77,77,0.5);}
  #gallery-next{position:absolute; right:0px; top:0px;  width:50%; height:300px; background-color:rgba(88,88,88,0.5);}
  </code></pre>
  
  <p>And the jquery:</p>
  
  <pre><code> $(document).ready(function(){ 
  
      $("#gallery-prev").click(function(){
    $(".galleryimage").animate({"left": "-=100%"}, "slow");
  });
  
  $("#gallery-next").click(function(){
    $(".galleryimage").animate({"left": "+=100%"}, "slow");
  });
  
  });
  </code></pre>
  
  <p>Here's a picture to show how the images are rendered at the moment just in case I explained something wrong, English isn't my first language:</p>
  
  <p><img src="https://i.stack.imgur.com/64TdQ.png" alt="enter image description here"></p>
  
  <p>I've tried display:inline without luck.</p>