Hi

I am creating a web form but seem to have a problem with my table

I have attached the form and css file but renamed the styles.css to styles.txt to allow me to upload it

My problem is I cannot get the paydate to slot left, I have tried to use <td colspan="">
but dont get the desired results.

I have also attached a screenshot

Thanks :)

Is there any particular reason that you chose not to use the code tags?
Most people won't open attachments, so you will get less help.

Hi

Thanks for the advice, here is a link and the code below that
http://www.itatpinnacle.com/test/policy_app.php

Form

<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>
<script type="text/javascript" src="datepickercontrol.js"></script>
<link type="text/css" rel="stylesheet" href="datepickercontrol.css">
<link href="styles.css" rel="stylesheet" type="text/css">

</head>

<body>
				<!-- Change default Date Picker to English -->
				<input type="hidden" id="DPC_TODAY_TEXT" value="today">
				<input type="hidden" id="DPC_BUTTON_TITLE" value="Open calendar...">
				<input type="hidden" id="DPC_MONTH_NAMES" value="['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']">
				<input type="hidden" id="DPC_DAY_NAMES" value="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']">
				<input type="hidden" id="DPC_DEFAULT_FORMAT" value="YYYY-MM-DD">
<form method="post" action="policy_app_proc.php">
				<div id="form">
				<div id="toperror"><?php print"<font color='#FF0000'><b>{$_SESSION['Imei_unique_error']}</b></font>";?></div>
				<div id="logo">
				<img src="images/24hr.jpg"/>
				</div>
				<div id="top_text">
				Insurer: Constantia Insurance Company Ltd * Reg. No. 1952/001514/06 * VAT No. 4920108935 * FSP No. 31111<br>
				Broker: Pinnacle Marketing (Pty) Ltd * Reg No. 1997/007463/07 * VAT No. 4760167744 * FSP No. 15017<br>
				Underwriting Manager: Administration Plus (Pty) Ltd * Reg. No. 2004/023852/07 * Vat No. 4190243008 * FSP No. 36841
				</div>
				<div id="policy_number">
				POLICY NUMBER <input type="text" name="PolicyNumber" style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['PolicyNumber'] ;?>" id="PolicyNumber" style="border:0;" readonly />
				</div>
<?php
$TextColour = "#000000";
?>			
	<table>
		<tr>
			<td>
				<div class="bar">
				THIS SCHEDULE BECOMES A TAX INVOICE WHEN THE AMOUNT REQUESTED HAS BEEN PAID
				</div>
			</td>
	    </tr>
	</table>
	
	<table>
		<tr>
			<td class="title">Dealer Code</td>
			<td><input name="DealerCode" type="text" id="DealerCode" style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['DealerCode'];?>" size="6" readonly/></td>
			<td class="title"><p style="background-color: <?php print $ConsultantName_error;?>">Consultants Name</td>
			<td><input name="ConsultantName" type="text" id="ConsultantName" tabindex=1 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['ConsultantName'] ;?>" size="15"/></td>
			<td class="title"><p style="background-color: <?php print $ConsultantSurname_error;?>">Consultants Surname</td>
			<td><input name="ConsultantSurname" type="text" id="ConsultantSurname" tabindex=2 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['ConsultantSurname'] ;?>" size="16"/></td>
		</tr>
	</table>
	
	<table>
		<tr>
			<td>
				<div class="bar">
				DETAILS OF CONTRACT HOLDER
				</div>
			</td>
		</tr>
	<table>

	<table>
		<tr>
			<td class="title"><p style="background-color: <?php print $ApplicationType_error;?>">Application Type</td>
			<td><select name="ApplicationType" style="color: <?php print $TextColour;?>" id="ApplicationType" tabindex=3>
			<option><?php print $_SESSION['ApplicationType'] ;?></option>
			<option>INDIVIDUAL</option>
			<option>COMPANY</option>
			</select></td>
			<td class="title"><p style="background-color: <?php print $ContractID_error;?>">ID No./Co. Reg. No.</td>
			<td><input name="Contract_IDNumber" type="text" id="Contract_IDNumber" tabindex=4 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['Contract_IDNumber'] ;?>" size="33"/></td>
			
		</tr>
		<tr>
			<td class="title"><p style="background-color: <?php print $ContractHolder_error;?>">Name or Co. Name</td>
			<td><input name="ContractHolder" type="text" id="ContractHolder" tabindex=5 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['ContractHolder'] ;?>" size="36"/></td>
			<td class="title"><p style="background-color: <?php print $ContractSurname_error;?>">Surname</td>
			<td><input name="ContractSurname" type="text" id="ContractSurname" tabindex=6 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['ContractSurname'] ;?>" size="33" /></td>

		</tr>
	</table>
	
	<table>
		<tr>
			<td>	
				<div class="bar">
				NAME, IDENTITY NUMBER AND CONTACT DETAILS OF USER
				</div>
			</td>
		</tr>
	</table>
	
	
	<table>
		<tr>
			<td class="title"><p style="background-color: <?php print $UserName_error;?>">Name</td>
			<td><input name="UserName" type="text" id="UserName" tabindex=7 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['UserName'] ;?>" size="36"/></td>
			<td class="title"><p style="background-color: <?php print $UserSurname_error;?>">Surname</td>
			<td><input name="UserSurname" type="text" id="UserSurname" tabindex=8 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['UserSurname'] ;?>" size="33" /></td>
		</tr>
		<tr>
			<td class="title"><p style="background-color: <?php print $Postal1_error;?>">Postal Address Line 1</td>
			<td><input name="Postal1" type="text" id="Postal1" tabindex=9 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['Postal1'] ;?>" size="36"/></td>
			<td class="title"><p style="background-color: <?php print $Tel_error;?>">Telephone Number</td>
			<td><input name="User_Telephone" type="text" id="User_Telephone" tabindex=10 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['User_Telephone'] ;?>" size="33"/></td>
		</tr>
		<tr>
		<td class="title"><p style="background-color: <?php print $Postal2_error;?>">Postal Address Line 2</td>
			<td><input name="Postal2" type="text" id="Postal2" tabindex=11 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['Postal2'] ;?>" size="36"/></td>
			<td class="title"><p style="background-color: <?php print $Fax_error;?>">Fax Number</td>
			<td><input name="User_Fax" type="text" id="User_Fax" tabindex=12 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['User_Fax'] ;?>" size="33"/></td>
		
		</tr>
		<tr>
		<td class="title"><p style="background-color: <?php print $PostalCode_error;?>">Postal Code</td>
			<td><input name="PostalCode" type="text" id="PostalCode" tabindex=13 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['PostalCode'] ;?>" size="36"/></td>
			<td class="title"><p style="background-color: <?php print $UserID_error;?>">Identity Number</td>
			<td><input name="User_IDNumber" type="text" id="User_IDNumber" tabindex=14 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['User_IDNumber'] ;?>" size="33"/></td>
		</tr>
	</table>
	
	<table>
		<tr>
			<td class="title"><p style="background-color: <?php print $Email_error;?>">Email</td>
			<td><input name="User_Email" type="text" id="User_Email" tabindex=15 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['User_Email'] ;?>" size="100"/></td>
		</tr>
	</table>
	
	<table>
		<tr>
			<td>	
				<div id="bar">
				DETAILS OF HANDSET OR MOBILE DEVICE TO BE INSURED
				</div>
			</td>
		</tr>	
	</table>

	
	<table>
		<tr>
			<td class="title"><p style="background-color: <?php print $Imei_error;?>">IMEI Number</td>
			<td><input name="Imei" type="text" id="Imei" tabindex=16 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['Imei'] ;?>" size="36"/></td>
			<td class="title">Date of Inception</td>
			<td><input name="InceptionDate" datepicker="true" type="text" id="InceptionDate" tabindex=17 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['InceptionDate'] ;?>" size="33" readonly /></td>
		</tr>
		<tr>
			<td class="title"><p style="background-color: <?php print $Make_error;?>">Phone Make</td>
			<td><input name="Make" type="text" id="Make" tabindex=18 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['Make'] ;?>" size="36"/></td>
			<td class="title"><p style="background-color: <?php print $CellNumber1_error;?>">Mobile Number 1</td>
			<td><input name="CellNumber1" type="text" id="CellNumber1" tabindex=19 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['CellNumber1'] ;?>" size="33"/></td>
		</tr>
		<tr>
			<td class="title"><p style="background-color: <?php print $Model_error;?>">Phone Model</td>
			<td><input name="Model" type="text" id="Model" tabindex=20 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['Model'] ;?>" size="36"/></td>
			<td class="title"><p style="background-color: <?php print $CellNumber2_error;?>">Mobile Number 2</td>
			<td><input name="CellNumber2" type="text" id="CellNumber2" tabindex=21 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['CellNumber2'] ;?>" size="33"/></td>
		</tr>		
	</table>

	<table>
		<tr>
			<td>
				<div id="bar">
				DEBIT ORDER AUTHORITY <style="font-size: 5px"Please note for the debit order facility an amount of R1.50(VAT included)is included in the total monthly premium/>
				</div>
			</td>
		</tr>		
	</table>

	
	<table>
		<tr>
			<td class="title"><p style="background-color: <?php print $AccountHolder_error;?>">Name of Account Holder</td>
			<td><input name="AccountHolder" type="text" id="AccountHolder" tabindex=22 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['AccountHolder'] ;?>" size="36"/></td>
			<td class="title"><p style="background-color: <?php print $BankSurname_error;?>">Surname</td>
			<td><input name="BankSurname" type="text" id="BankSurname" tabindex=23 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['BankSurname'] ;?>" size="33"/></td>
		</tr>
		<tr>
			<td class="title"><p style="background-color: <?php print $Bank_error;?>">Bank Name</td>
			<td><input name="Bank" type="text" id="Bank" tabindex=24 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['Bank'] ;?>" size="36"/></td>
			<td class="title"><p style="background-color: <?php print $AccountNumber_error;?>">Account Number</td>
			<td><input name="AccountNumber" type="text" id="AccountNumber" tabindex=25 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['AccountNumber'] ;?>" size="33"/></td>
		</tr>
		<tr>
		
			<td class="title"><p style="background-color: <?php print $AccountType_error;?>">Type Of Account</td>
			<td>
				<select name="AccountType" style="color: <?php print $TextColour;?>" id="AccountType" tabindex=26>
				<option><?php print $_SESSION['AccountType'] ;?></option>
				<option>CHEQUE ACCOUNT</option>
				<option>SAVINGS ACCOUNT</option>
				</select>
			</td>
			<td class="title"><p style="background-color: <?php print $DebitDate_error;?>">Requested Debit Date</td>
			<td colspan="3">
				<select name="DebitDate" style="color: <?php print $TextColour;?>" id="DebitDate" tabindex=27>
				<option><?php print $_SESSION['DebitDate']?></option>
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option>6</option>
				<option>7</option>
				<option>8</option>
				<option>9</option>
				<option>10</option>
				<option>11</option>
				<option>12</option>
				<option>13</option>
				<option>14</option>
				<option>15</option>
				<option>16</option>
				<option>17</option>
				<option>18</option>
				<option>19</option>
				<option>20</option>
				<option>21</option>
				<option>22</option>
				<option>23</option>
				<option>24</option>
				<option>25</option>
				<option>26</option>
				<option>27</option>
				<option>28</option>
				<option>29</option>
				<option>2nd LWDay</option>
				<option>Last WDAY</option>
				</select>
				</td>
				<td class="titlesmall"><p style="background-color: <?php print $PayDate_error;?>">Pay Date</td>
				<td>
				<select name="PayDate" style="color: <?php print $TextColour;?>" id="PayDate" tabindex=28>
				<option selected="selected"><?php print $_SESSION['PayDate']?></option>
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option>6</option>
				<option>7</option>
				<option>8</option>
				<option>9</option>
				<option>10</option>
				<option>11</option>
				<option>12</option>
				<option>13</option>
				<option>14</option>
				<option>15</option>
				<option>16</option>
				<option>17</option>
				<option>18</option>
				<option>19</option>
				<option>20</option>
				<option>21</option>
				<option>22</option>
				<option>23</option>
				<option>24</option>
				<option>25</option>
				<option>26</option>
				<option>27</option>
				<option>28</option>
				<option>29</option> 
				<option>30</option>
				<option>31</option>
				</select>
				</td>
			</td>
		</tr>
		<tr>
			<td class="title"><p style="background-color: <?php print $BranchName_error;?>">Branch Name</td>
			<td><input name="BranchName" type="text" id="BranchName" tabindex=28 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['BranchName'] ;?>" size="36"/></td>
			<td class="title"><p style="background-color: <?php print $BranchCode_error;?>">Branch Code</td>
			<td><input name="BranchCode" type="text" id="BranchCode" tabindex=29 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['BranchCode'] ;?>" size="33"/></td>
		</tr>
	</table>
	
	<table>
		<tr>
			<td>
				<div id="text_block">
				<ul>
				<li>I request and authorise Administration Plus (Pty)Ltd to draw against the abovementioned account, the amount necessary for payment of the monthly premiumas and when<br />
				required and for the amount requested every month until this arrangementis cancelled in writing by either party.</li>
				<li>I accept that if a debit date falls on a weekend. I will be debited on the prior working day.</li>
				<li>If no debit date is selected Administration Plus (Pty) Ltd reserve the right to select the last working day of the month.</li>
				<li>I consent to the information being supplied to or from the credit bureau.</li>
				</ul>
				&nbsp &nbsp &nbsp &nbsp &nbsp <input type="checkbox" name="option1" tabindex=30 value="1"/> I Accept the above and to the information being entered correctly &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
				<input name="AppDate" type="text" id="AppDate" style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['AppDate'] ;?>" size="18" style="border:0;" readonly/>
				</div>
			</td>
		</tr>
	</table>

	<table>
		<tr>
			<td>	
				<div id="bar">
				INSURED VALUE AND MONTHLY PREMIUM PAYABLE ARE VAT INCLUSIVE
				</div>
			</td>
		</tr>
	</table>
	
	
	<table>
		<tr>
			<td>	
				<div id="clear_bar">
				NOTE: Cover above R5001 is calculated at R1.00 for every additional R100.00 cover required.
				</div>
			</td>
		</tr>
	</table>
		
	<table>
		<tr>
			<td class="titleclear"><p style="background-color: <?php print $DeviceValue_error;?>">&nbsp	Device Value</td>
			<td><input name="DeviceValue" type="text" id="DeviceValue" tabindex=31 style="color: <?php print $TextColour;?>" value="<?php print $_SESSION['DeviceValue'] ;?>" size="31"/></td>
		</tr>
		<tr>
			<td class="titleclear"><p style="background-color: <?php print $Simsure_error;?>">&nbsp	Simsure</td>
			<td><select name="Simsure" style="color: <?php print $TextColour;?>" id="Simsure" tabindex=32>
				<option><?php print $_SESSION['Simsure'] ;?></option>
				<option>YES</option>
				<option>NO</option>
				</select>
			</td>
			<td rowspan="2"><input type="submit" name="Submit" id="Submit" value="Calculate" tabindex=33/></td>
		</tr>	
	</table>
</div>
</form>
<?php ob_flush();?>
</body>
</html>

CSS

.title {
	width: 150; height: 20px;
	border-style: solid;
	border-width: 1px; 
	border-color: #000000;
	background-color: #FFC800;
	color: #FFFFFF;
	font-size: 13px;
	text-align: center;
	font-family: calibri;
	font-weight: bold;
	position:relative;
	float:left;
}

.titleclear {
	width: 150; height: 20px;
	border-style: solid;
	border-width: 1px; 
	border-color: #000000;
	background-color: #FFFFFF;
	color: #000000;
	font-size: 12px;
	text-align: center;
	font-family: calibri;
	font-weight: bold;
	position:relative;
	float:left;
}

.titlesmall {
	width: 70; height: 20px;
	border-style: solid;
	border-width: 1px; 
	border-color: #000000;
	background-color: #FFB500;
	color: #FFFFFF;
	font-size: 12px;
	text-align: center;
	font-family: calibri;
	font-weight: bold;
	position:relative;
	float:left;
}

.test{
	border-style: solid;
	border-width: 1px; 
	border-color: #000000;


}

.clear {
	position: relative;
	clear: both;
}

.formTable {

}

.body { 
 text-align: center;
 margin: 0 auto;
}

#form {
	width: 900px;
	position: relative;
	margin: 0 auto;
	text-align: left;
	background-color: white;
	border-style: none;
	border-width: 1px;
}

#logo{
text-align: center;
padding-bottom: 5px;
padding-right: 80px;

}

#top_text{
width: 510px; height: 40px;
border-style: none; 
border-width: 1px;
border-color: #000000;
background-color: #FFFFFF;
color: #000000;
font-size: 10px;
text-align: left;
font-family: calibri;
font-weight: bold;
position:relative;
float:left;
}

#policy_number{
color: #000000;
font-size: 18px;
font-family: calibri;
font-weight: bold;
}


#bar, .bar {
width: 804px; height: 20px;
border-style: solid; 
border-width: 1px;
border-color: #000000;
background-color: #FFB500;
color: #000000;
font-size: 18px;
text-align: center;
font-family: calibri;
font-weight: bold;
position:relative;
float:left;
}

#clear_bar{
width: 804px; height: 20px;
border-style: solid; 
border-width: 1px;
border-color: #000000;
background-color: #FFFFFF;
color: #000000;
font-size: 18px;
text-align: center;
font-family: calibri;
font-weight: bold;
position:relative;
float:left;
}

#left_block{
width: 150; height: 20px;
border-style: solid;
border-width: 1px; 
border-color: #000000;
background-color: #8BCAD7;
color: #FFFFFF;
font-size: 12px;
text-align: center;
font-family: calibri;
font-weight: bold;
position:relative;
float:left;

}

#left_block_singular{
width: 150; height: 20px;
border-style: solid;
border-width: 1px; 
border-color: #000000;
background-color: #FFFFFF;
color: #000000;
font-size: 12px;
text-align: left;
font-family: calibri;
font-weight: bold;
position:relative;
float:left;

}

#left_block_bigger{
width: 150; height: 42px;
border-style: solid;
border-width: 1px; 
border-color: #000000;
background-color: #8BCAD7;
color: #FFFFFF;
font-size: 12px;
text-align: center;
font-family: calibri;
font-weight: bold;
position:relative;
float:left;
}

#text_field{
position:relative;
float:left;
}

#text_field_left{
position:relative;
float:left;
padding-right: 37px
}

#drop_down_left{
position:relative;
float:left;
padding-right: 127px
}

#drop_down_right{
position:relative;
float:left;
height: 22; width: 200;
padding-right: 5px
}

#text_block{
width: 804px; height: 120px;
border-style: solid; 
border-width: 1px;
border-color: #000000;
background-color: #FFFFFF;
color: #000000;
font-size: 10px;
text-align: left;
font-family: calibri;
position:relative;
float:left;
}

#text_field_singular{
position:relative;
float:left;
padding-right: 500px
}

#bottom_text{
width: 481px; height: 210px;
border-style: none; 
border-width: 1px;
border-color: #000000;
background-color: #FFFFFF;
color: #000000;
font-size: 10px;
font-family: calibri;
text-align: justify;
position:relative;
float:left;
}

#pinnacle{
position:relative;
float:left;
border-style: none; 
border-width: 1px;
border-color: #000000;


}


#submit_block{

width: 175px; height: 100px;
border-style: solid; 
border-width: 1px;
border-color: #000000;
background-color: #FFFFFF;
color: #000000;
position:relative;
float:left;
text-align: center;

}

#current_date{
width: 175px; height: 22px;
border-style: solid; 
border-width: 1px;
border-color: #000000;
background-color: #FFFFFF;
color: #000000;
position:relative;
float:left;
text-align: center;
}

#bar_right{
width: 175px; height: 22px;
border-style: solid; 
border-width: 1px;
border-color: #000000;
background-color: #FFB500;
color: #000000;
font-size: 18px;
text-align: center;
font-family: calibri;
font-weight: bold;
position:relative;
float:left;
}

#btm_rght_text_box{
width: 175px; height: 75px;
border-style: solid; 
border-width: 1px;
border-color: #000000;
background-color: #FFFFFF;
color: #000000;
font-size: 14px;
font-family: calibri;
font-weight: bold;
text-align: center;
position:relative;
float:left;
}

Your codes are not properly nested. Some are missing close tags. I found that 'p' has not close tag.

Run your code in browser and then open the view sources, validate these codes.
Here is validator

And also need the DTD in your document. You can get more infos about DTD here.

thanks

Any idea on how to get the paydate left??

Hello, in line 240. try this:

<td class="titlesmall"><p style="background-color: <?php print $PayDate_error;?> ">Pay Date</p></td>

See that you forgot the </p> tag.

There is a member of this forum that has a tag line that goes something like this:
"I wrote some of my best code with the delete key".
The moral to the story is that oftenless is more.
You don't need a table to make that form. tables are for tabular data.
Use divs.
Also you are using absolute pixel sizes. With all of the various monitor shapes and resolutions, it's better to use percentages whenever possible.

i started off using divs as I mostly use divs, but then I had issues with IE not aligning it the same ....... can anyone assist?

i started off using divs as I mostly use divs, but then I had issues with IE not aligning it the same ....... can anyone assist?

Different versions of IE have different levels of compliance ( or lack therof). You have to create separate CSS files for the IE versions that you wish to support.
It sucks, but that's the reality.
Marketing trumps performance.

ok thanks

Could anyone perhaps tell me how to fix this as is without changinging it
how do I just get the paydate to slot left please:)

Also wouldnt that require Java to detect the browser initially?
What if the clients dont have java loaded this could be an issue

I really would like some assistance in solving my problem without changing it completely

Could any1 help????

ok thanks

Could anyone perhaps tell me how to fix this as is without changinging it
how do I just get the paydate to slot left please:)

Also wouldnt that require Java to detect the browser initially?
What if the clients dont have java loaded this could be an issue

I really would like some assistance in solving my problem without changing it completely

Could any1 help????

You have set the cell width to 70px and a border of 1px in the class below. that first td will always be 70 px before the next cell. if this class is used elsewhere, then just make a modified version like titlesmall2 with the appropriate width. Alternatively,I think you can override the width by doing an in-line style statement for that cell.

#
.titlesmall {
#
width: 70; height: 20px;
#
border-style: solid;
#
border-width: 1px;
#
border-color: #000000;
#
background-color: #FFB500;
#
color: #FFFFFF;
#
font-size: 12px;
#
text-align: center;
#
font-family: calibri;
#
font-weight: bold;
#
position:relative;
#
float:left;
#
}

Hi Thanks for the info.

If i change the width in the titlesmall class it just makes that cell smaller it's not going to shift it left, I need it to slot left how will I get that Right?

Did you actually try any of he suggestions?
You have two cells in tandem. Making the the first one smaller should cause it to shift left. The trouble with using tables is that they were designed to align vertically for tabular data. You may have to add <td colspan="2"> to the cells
above. That may help cause the cell below to pull left.
There are interactions going on that will make you crazy when trying to design free-form.

Continue this way, and you will learn a lot about the nuances of tables. You have to experiment a bit. There is more going on than meets the eye.
We have suggested that you re-think the entire project, though.