Float Multiple Tables to the Top

[Stormy Para]

I am trying to get 3 tables align to the same row. Any help rendered is greatly appreciated

Existing Problem

What I want to achieve

Link to page

Body

<table width="920px">
<tbody>
<tr>
<td width="40%">
<table width="40%">
<tbody>
<tr>
<td class="tableheader" style="text-align: justify;"><span style="color: #ffffff;">Our Subsidiaries</span></td>
</tr>
<tr>
<td class="tablecontent" style="text-align: justify;"><a href="http://www.globaldenso.com/motorsports/index.html" target="_blank"><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Home_Link1.gif" alt="" title="" width="119" height="35" class="alignleft size-full wp-image-494" /></a>&nbsp;&nbsp;&nbsp;<a href="http://denso-yea.com/" target="_blank"><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Home_Link2.jpg" alt="" title="" width="119" height="35" class="alignleft size-full wp-image-495" /></a><br/>
<a href="http://www.globaldenso.com/en/aboutdenso/globalnetwork/globalmap/index.html" target="_blank"><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Home_Link3.jpg" alt="" title="" width="119" height="35" class="alignleft size-full wp-image-496" /></a>&nbsp;&nbsp;&nbsp;<a href="http://www.globaldenso.com/en/" target="_blank"><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Home_Link4.jpg" alt="" title="" width="119" height="35" class="alignleft size-full wp-image-497" /></a></td>
</tr>
</tbody>
</table>
</td>
</td>
<td width="30%">
<table width="30%">
<tbody>
<tr>
<td class="tableheader" style="text-align: justify;"><span style="color: #ffffff;">Quick Links</span></td>
</tr>
<tr>
<td class="tablecontent" style="text-align: justify;">Find Your Spark Plug

Spark Plug Cross Reference</td>
</tr>
</tbody>
</table>
</td>
<td width="30%">
<table width="30%">
<tbody>
<tr>
<td class="tableheader" style="text-align: justify;"><span style="color: #ffffff;">DENSO Group Companies</span></td>
</tr>
<tr>
<td class="tablecontent" style="text-align: justify;">
Japan
-- <a href="http://www.denso.co.jp/ja/" target="_blank">Japan(Japanese)</a>


America
-- <a href="http://www.densona.com/" target="_blank">North America</a>
-- <a href="http://www.denso.com.br/" target="_blank">Brazil</a>

Europe
-- <a href="http://denso-europe.com/" target="_blank">Europe</a>

Asia/Oceania
-- <a href="http://www.denso.com.au/" target="_blank">Australia</a>
-- <a href="http://denso-europe.com/" target="_blank">Singapore</a>
-- <a href="http://www.denso.co.th/" target="_blank">Thailand</a>
-- <a href="http://www.denso.co.id/" target="_blank">Indonesia</a>
-- <a href="http://www.denso.com.my/home.aspx" target="_blank">Malaysia</a>
-- <a href="http://www.denso.com.cn/" target="_blank">China</a>
-- <a href="http://www.denso.com.ph/" target="_blank">Philippines</a>
-- <a href="http://www.denso.com.tw/" target="_blank">Taiwan</a>
-- <a href="http://www.denso.co.in/DNIN/index.html" target="_blank">India</a></td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>

CSS

td.tableheader {
vertical-align: top;
background-color:#336666;
width: 30%;
padding-top:4px;
padding-bottom:4px;
padding-right:9px;
padding-left:9px;
border-color: #c0c0c0;
border-width: 1px 1px 1px 1px;
border-style: solid;
}

td.tablecontent {
vertical-align: top;
width: 30%;
height: 100px;
padding-top:4px;
padding-bottom:4px;
padding-right:9px;
padding-left:9px;
border-color: #c0c0c0;
border-width: 1px 1px 1px 1px;
border-style: solid;
}

[RyanReese]

Hi . You have this currently

table tr td, table tr th {
text-align: left;
padding: 5px 7px 3px 7px;
vertical-align: middle;
border-bottom: 1px solid white;
}

That's making the table to be vertically aligned in hte middle (the 3rd <td> (with the last column) doesn't appear to be affected because it's so long). If you need that to be a default property/value for elsewhere on the site, just reset it for that table .

Preferably just assign that one parent table a class, and set the vertical-align to top . Or just remove that vertical-align rule I posted and it'll be fixed. Either one. Depends on the rest of the needs on your site.

[Stormy Para]

Hi . You have this currently

table tr td, table tr th {
text-align: left;
padding: 5px 7px 3px 7px;
vertical-align: middle;
border-bottom: 1px solid white;
}

That's making the table to be vertically aligned in hte middle (the 3rd <td> (with the last column) doesn't appear to be affected because it's so long). If you need that to be a default property/value for elsewhere on the site, just reset it for that table .

Preferably just assign that one parent table a class, and set the vertical-align to top . Or just remove that vertical-align rule I posted and it'll be fixed. Either one. Depends on the rest of the needs on your site.

Hi Ryan,

Thank you so far. I have managed to find it through firebug. Is there any good tutorials for usage of FireBug?

Chris

[RyanReese]

Not that I know of. Just play with it .