Images not appearing on the same line with display:inline-block
<p>In order to position two images beside each other (i.e. the two images are on the same line), I tried the following code:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;style&gt;

        #container {
            width:100%;
        }

        img {
            display:inline-block;
            width:50%;
        }

    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1 style="text-align:center"&gt;&lt;strong&gt;Test&lt;/strong&gt;&lt;/h1&gt;
    &lt;div id="container"&gt;
        &lt;img src="Google-logo.png"&gt;
        &lt;img src="Google-logo.png"&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p></p>

<p>The width of the container div <strong>should</strong> be shared equally by the two images, right? However, this does not happen and the images appear on two separate lines.</p>

<p>If, however, I use float:left instead, the images do appear on the same line. Why is this?</p>