Log in

View Full Version : Help with alignment of tables


biomike
12-13-2009, 08:40 PM
I am running into a problem with verticle aligment.

Following is the code for what i am trying to achieve. I want to have 3 columns on the page so i have created a table with 3 columns and inside each column i have put a table. The problem arises is that when i had content to any of the 3 columns i loose the 'top' verticle alignmnet in the other columns and they start drifting down the page.

Any suggestions would be appreciated



<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<body>

<table border="0" width="100%" height="619">
<tr>
<td width="20%" height="588">
<div align="center">
<table border="0" width="103%" height="1">
<tr>
<td width="100%" height="1"><font face="Arial">video</font>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td width="100%" height="171">&nbsp;
<p><font face="Arial">quick links</font></p>
</td>
</tr>
<tr>
<td width="100%" height="57"><font face="Arial">what the clients have to say</font>
<p>&nbsp;
<p>&nbsp;</td>
</tr>
<tr>
<td width="100%" height="1"></td>
</tr>
</table>
</div>
</td>
<td width="61%" height="588">
<table border="2" width="100%" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000" bgcolor="#FFFFFF" valign="top" height="290">
<tr>
<td width="100%" bgcolor="#FFFFFF" bordercolor="#FFFFFF" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF" height="284">
<p class="MsoNormal" style="margin-left: 0pt; margin-top: 0pt; margin-bottom: 0pt">&nbsp;</p>
<p class="MsoNormal" style="margin-left: 0pt; margin-top: 0pt; margin-bottom: 0pt"><span lang="EN-US"><font size="2" face="Arial">df</font></span></p>
<p class="MsoNormal" style="margin-left: 0pt; margin-top: 0pt; margin-bottom: 0pt">&nbsp;
<p class="MsoNormal" style="margin-left: 0pt; margin-top: 0pt; margin-bottom: 0pt">&nbsp;
<p>&nbsp;</td>
</tr>
</table>
<table border="1" width="100%" height="49">
<tr>
<td width="100%" height="43">
<p align="center"><font face="Arial">what we can do for you</font></p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
</td>
</tr>
</table>
<div align="center">
<table border="1" width="100%" height="241">
<tr>
<td width="50%" valign="top" align="center" height="235"><font face="Arial">&nbsp;news</font>
</td>
<td width="50%" valign="top" align="center" height="235"><font face="Arial">Case
histories</font></td>
</tr>
</table>
</div>
</td>
<td width="19%" height="588">
<div align="center">
<table border="0" width="97%" height="116" valign="top" style="position: relative; top: 0">
<tr>
<td width="100%" valign="top" align="center" height="1">
<p style="margin-top: 0; margin-bottom: 6">
<b>
<font size="1" face="Arial">Page updated&nbsp;10 Dec '09</font></b></td>
</tr>
<tr>
<td width="100%" valign="top" align="center" height="133">
</td>
</tr>
<tr>
<td width="100%" valign="top" align="center" height="286">
<p></p>
</td>
</tr>
<tr>
<td width="100%" valign="top" align="center" height="171">&nbsp;<p><font face="Arial">Training</font></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</td>
</tr>
<tr>
<td width="100%" valign="top" align="center" height="1"><font face="Arial">Research</font>
<p>&nbsp;</p>

<p>&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

</body>

</html>
jscheuer1
12-13-2009, 08:48 PM
Add this (highlighted) as shown:


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<style type="text/css">
td {
vertical-align: top;
}
</style>
</head>
biomike
12-13-2009, 09:45 PM
thanks for that
aqeel
12-26-2009, 09:47 AM
You should set the alignment of the outer table
1. in case of CSS define
vertical-align:top;

2.Otherwise in in table tag
<table .... valign="top">