Question

Hey all here are my tables i have placed in a DIV for each.

The CSS code for this is:

#PackageBG1 {
      position:relative;
      width:218px;
      z-index:10;
      top: 30px;
      bottom: 0;
      margin-left: 5px;
    }
    #PackageBG2 {
      position:relative;
      width:218px;
      z-index:10;
      top: 30px;
      bottom: 0;
      margin-left: 5px;
    }
    #PackageBG3 {
      position:relative;
      width:218px;
      z-index:10;
      top: 30px;
      bottom: 0;
      margin-left: 5px;
    }
    #PackageBG4 {
      position:relative;
      width:218px;
      z-index:10;
      top: 30px;
      bottom: 0;
      margin-left: 5px;
    }

The layout for the boxes are:

<div id="PackageBG1">
<table id="PackageOne" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="0" rowspan="4">&nbsp;</td>
        <td colspan="3">
            <img src="images/mobileit-design-work-MOBILEITINC3_03.jpg" width="215" height="10" alt=""></td>
        </tr>
    <tr>
        <td style="background-image: url(images/mobileit-design-work-MOBILEITINC3_11.jpg); background-repeat:repeat-y; background-position:left top;" width="3px"></td>
        <td style="background-image: url(images/mobileit-design-work-MOBILEITINC3_12.jpg); background-repeat:no-repeat; background-color:#ececec;">
            <div id="Package">
              <div id="playIcon">
                <img src="images/playIcon_53.png" width="28" height="24" />
              </div>
              <span class="packageTitle">Virtual Desktop</span>
              <span class="packageTitle-sub">Standard Package 1</span>
            </div>
            <div class="packages-text"><p>
              - Enter text here<br>
              - About<br>
              - Pkg<br>
              - Enter text here<br>
              - About<br>
              - Pkg <br>
              - Pkg <br>
              - another<br>
              - and another<br>
              - Pkg <br>
              - another<br>
              - and another<br>
              - another<br>
              - and another<br>              
              - and again
              </p></div>
            <span class="packages-price">$29.95</span><span class="packages-text-bold"> /month</span><br>
            </p>
            <div id="Package-ON"><img src="images/ordernow_55.png" width="133" height="35"></div>        
        </td>
        <td style="background-image: url(images/mobileit-design-work-MOBILEITINC3_13.jpg); background-repeat:repeat-y; background-position:right top;" width="3px"></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/mobileit-design-work-MOBILEITINC3_23.jpg" width="215" height="10" alt="">
      </td>
    </tr>
</table>
          </div>

I am trying to get the second table to align with both the left and right tables when it doesn’t have as much text as the others do.

**Heres the JDFiddle link: http://jsfiddle.net/RBq3a/2/ **

Answer 1

Give vertical-align:top to your TD. Write like this:

td,th {
    vertical-align:top;
}

Check this http://jsfiddle.net/RBq3a/4/