How to display images on same line in html
<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>