title: CSS - Displaying images in a div in a line
body: <p>I have 3 images inside a div and i want them to be displayed in a single line. The output thats coming from my current code is that 2 images are one a single line and the other one at the bottom.</p>
  
  <p>Any help would be appreciated!</p>
  
  <p>My Code of HTML:</p>
  
  <pre><code>&lt;div id="slider_container"&gt;
              &lt;div class="slider"&gt;
                  &lt;img id="1" src="Kid Playing Guitar_big.jpg" border="0" style="float:left;" /&gt;
                  &lt;img id="2" src="University Students_big.jpg" border="0" style="float:left;" /&gt;
                  &lt;img id="3" src="Business Man_big.jpg" border="0" style="float:left;" /&gt;
              &lt;/div&gt;
              &lt;div class="slider_thumbnails"&gt;
                  &lt;img id="1" src="Kid Playing Guitar.jpg" border="0" /&gt;
                  &lt;img id="2" src="University Students.jpg" border="0" /&gt;
                  &lt;img id="3" src="Business Man.jpg"  border="0" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>My code for CSS:</p>
  
  <pre><code>@CHARSET "UTF-8";
  
          #slider_container{
              height: 360px;
              width: 720px;
          }
  
          .slider{
              width: 720px;
              height: 360px;
              overflow: hidden;
              background-image: url(loading.gif);
              background-repeat: no-repeat;
              background-position: center;
          }
  
          .slider img{
              width: 480px;
              height: 360px;
              display: none;
          }
  
          .slider_thumbnails{
              width: 720px;
              display:inline-block;
          }
  
          .slider_thumbnails img{
              display: inline-block;
          }
  </code></pre>
  
  <p>Please explain the code after you post your answer.</p>