How to make my 4 articles (2 columns) have equal height?

Question

Please take a look at my live example: http://jsfiddle.net/mdermez32/vTynd/
If you see my link you'll notice that the cells on the right are shorter than the left.. what is wrong in my code? how can I make their height equal?
HTML:
<table class="art-article" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<col width="50%" />
<col width="50%" />
    <tbody>
        <tr>
            <td><table class="metaart"  width="100%" border="0">
                    <tbody>
                        <tr>
                            <th class="titlebox" align="justify" background="./images/backgroundxa.png"; style="text-align:left" scope="col"><span style="text-align:left;"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">LOREM </span></span><span style="color:rgb(235, 81, 5);"><a href="./services/operating-systems.html"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">IPSUM</span></span></a><span style="color:rgb(61,60,51);"><span style="font-weight:normal;"><span style="font-size:20px;"><span ;">; </span></span></span></span></span></span><span style="font-size:20px;"></span></th>
                        </tr>
                        <tr>
                            <td> <img src="./images/win7-logo.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
                            </tr>
                        <tr>
                          <td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                            <p style="text-align:right"><strong><a href="./services/operating-systems.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
                          </tr>
                    </tbody>
                </table></td>
            <td> <table class="metaart"   width="100%" border="0">
                    <tbody>
                        <tr>
                            <th class="titlebox" align="justify" background="./images/backgroundxa.png" ; style="text-align:left" scope="col"><span style="text-align:left;"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">LOREM IPSUM DOLOR</span></span><span style="color:rgb(235, 81, 5);"><span style="color:rgb(61,60,51);"><span style="font-weight:normal;"><span style="font-size:20px;"><span ;"> </span></span></span></span></span></span></th>
                        </tr>
                        <tr>
                            <td> <img src="./images/ubbuntu.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
                            </tr>
                        <tr>
                          <td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                            <p style="text-align:right"><strong><a href="./services/operating-systems.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
                          </tr>
                    </tbody>
                </table></td>
        </tr>
        <tr>
          <td>  </td>
          <td>  </td>
        </tr>
        <tr>
          <td><table class="metaart"  width="100%" border="0">
                    <tbody>
                        <tr>
                            <th class="titlebox" align="justify" background="./images/backgroundxa.png" ; style="text-align:left" scope="col"><span style="text-align:left;"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">LOREM IPSUM DOLOR</span></span><span style="color:rgb(235, 81, 5);"><span style="color:rgb(61,60,51);"><span style="font-weight:normal;"><span style="font-size:20px;"><span ;"> </span></span></span></span></span></span></th>
                        </tr>
                        <tr>
                            <td> <img src="./images/brands.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
                            </tr>
                        <tr>
                          <td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                            <p style="text-align:right"><strong><a href="./services/laptop.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
                          </tr>
                    </tbody>
                </table></td>
          <td><table class="metaart" padding=10px;  width="100%" border="0">
                    <tbody>
                        <tr>
                            <th class="titlebox"  align="justify" background="./images/backgroundxa.png" ; style="text-align:left" scope="col"><span style="text-align:left;"><span style="font-size: 20px; color: rgb(61,60,51)">LOREM IPSUM DOLOR </span></span></th>
                        </tr>
                        <tr>
                            <td> <img src="./images/farmacy.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
                                </tr>
                            <tr>
                          <td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam</p>
                            <p style="text-align:right"><strong><a href="./services/medical-software.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
                          </tr>
                    </tbody>
                    </table></td>
        </tr>
    </tbody>
</table><br />
                </div>
                <div class="cleared"></div>
                </div>
The css code for the shadow effect and the gradient in the title is in the css section at the btm.
What I am trying to do is to make my tables have equal height. As you can see the height of the right tables/cell is smaller than the left ones.
Second question.. where should I put code for padding in order to increase the space between text and it's box.

Answer 1

Not to disparage Jon's example in any way.  It works great.  But I prefer to use HTML5 tags wherever possible because they add semantic meaning & structure to your content. 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display Table</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
body {
    background: #333;
    color: #FFF;
    font-size: 62.50%;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
#wrapper {
    width: 900px;
    margin: 0 auto;
    background: #069;
header { border-top: 4px solid #F93 }
section { /**for equal height columns**/ display: table-row; }
article {
    /**for equal height columns**/  display: table-cell;
    text-align: left;
    vertical-align: top;
    background: #FFF;
    color: #000;
footer {
    position: relative;
    text-align: center
footer aside {
    width: 33.33%;
    float: left;
    color: #FFF;
    background: #069;
    text-align: center;
h1, h2, h3, p { padding: 0 12px 0 12px; }
h3 {
    background: #F90;
    color: #000;
    width: 50%;
    border-radius: 15px;
    line-height: 26px;
</style>
</head>
<body>
<!--IE8 End of Life-->
<!--[if lt IE 9]>
<h2>You are using an out of date browser which limits your web experience. 
For best results, please use a newer browser.<h2>
<![endif]-->
<div id="wrapper">
<header> <h1>XYZ Company Name</h1>
<h2>Demo of CSS Display: Table Properties</h2>
<nav>Your menu goes here...</nav>
</header>
<section>
<article> <h3>Heading 3 - Article</h3>
<p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit</p>
<p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit</p>
</article>
<article> <h3>Heading 3 - Article</h3>
<p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit </p>
</article>
</section>
<section>
<article> <h3>Heading 3 - Article</h3>
<p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit</p>
<p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit</p>
</article>
<article> <h3>Heading 3 - Article</h3>
<p>Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit </p>
</article>
</section>
<footer>
<aside><p>Footer aside</p>
</aside>
<aside><p>Footer aside</p>
</aside>
<aside><p>Footer aside</p>
</aside>
<p>© 2013 Footer text</p>
</footer>
<!--end wrapper-->
</div>
</body>
</html>
Nancy O.