title: How to display images on same line in html
body: <p>I'm trying to learn some html and I'm not sure what I'm doing wrong. I have 3 images I want to have in the same horizontal line like | img 1 | img 2 | img 3 |. The outer div container im using has enough space to fit all 3 images.</p>
  
  <p>I've tried using inline-block, inline and float but those don't work.</p>
  
  <p>Here is what I got:</p>
  
  <pre><code>    &lt;div id="banner" style="overflow: hidden; display: inline-block;"&gt;
          &lt;div class="" style="max-width: 20%; max-height: 20%;"&gt;
              &lt;img src ="img1.jpg"&gt;
          &lt;/div&gt;
  
          &lt;div class="" style="max-width: 100%; max-height: 100%;"&gt;
              &lt;img src ="img2.jpg"&gt;
          &lt;/div&gt;
  
          &lt;div class="" style="max-width: 20%; max-height: 20%;"&gt;
              &lt;img src ="img3.jpg"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>