Making Images side by side with the same width and height?
<p>I'm new to HTML and CSS, 
I created HTML/CSS page and want to put 4 Images side by side 
with different width and height,
I want all of them to be same width and height,
because they don't look good with different width and height,
also the info doesn't appear on the same line because of that</p>

<p>CSS:</p>

<pre><code>      p {
        line-height: 20px;
        margin-bottom: 20px;
    }
     .clear {
        clear: both;
    }

    .wrapper {
        margin: 0 auto;
        padding: 0 10px;
        width: 940px;
    }       
    #primary-content {
        background-color: #f8fafa;
        padding: 20px 0;
        text-align: center;
    }

    #primary-content h3 {
        display: block;
        margin: 0 auto 20px auto;
        width: 400px;
        border-bottom: 1px solid #02b8dd;
        padding: 0 0 20px 0;
    }

    #primary-content images{
        margin: 20px 0;
    }
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="primary-content"&gt;
    &lt;div class="wrapper"&gt;
        &lt;article&gt;
            &lt;h3&gt;Test&lt;/h3&gt;

            &lt;images&gt;

                &lt;p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;"&gt;
                    &lt;img src="images/img1.jpg" alt="img1" title="img1" style="width: 100%" /&gt; info
                &lt;/p&gt;


                &lt;p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;"&gt;
                    &lt;img src="images/img2.jpg" alt="img2" title="img2" style="width: 100%" /&gt; info
                &lt;/p&gt;



                &lt;p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;"&gt;
                    &lt;img src="images/img3.jpg" alt="img3" title="img3" style="width: 100%" /&gt; info
                &lt;/p&gt;


                &lt;p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;"&gt;
                    &lt;img src="images/img4.jpg" alt="img4" title="img4" style="width: 100%" /&gt; info
                &lt;/p&gt;


                &lt;p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;"&gt;
                    &lt;img src="images/img5.jpg" alt="img5" title="img5" style="width: 100%" /&gt; info
                &lt;/p&gt;


                &lt;p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;"&gt;
                    &lt;img src="images/img6.jpg" alt="img6" title="img6" style="width: 100%" /&gt; info
                &lt;/p&gt;

                &lt;p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;"&gt;
                    &lt;img src="images/img7.jpg" alt="img7" title="img7" style="width: 100%" /&gt; info
                &lt;/p&gt;

                &lt;p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;"&gt;
                    &lt;img src="images/img8.jpg" alt="img8" title="img8" style="width: 100%" /&gt; info
                &lt;/p&gt;

                &lt;div class="clear"&gt;&lt;/div&gt;
            &lt;/images&gt;

        &lt;/article&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Thanks</p>