My goal is to have my two forms displayed side by side, but currently they are appearing stacked on top of each other.
Below is the code I am using:
<id ='AvailabilityFormAM'><form action='availability.jsp' name='availForm_AM' method='post'>
<table class='TableBorder'><tr class='TableHeading'><td colspan='2'>New activity AM</td></tr>
<tr class='TableData2'><td align='left'>Description:</td>
<td align='left'><input style='width:150px' type='text' name='description' value='Informatica' /></td></tr>
<tr class='TableData2'><td colspan='2'>
<input class='SolidButton' type='button' value='Delete' onclick='javascript:deleteSLine("AM");'/></td></tr></table></form></div>
<id ='AvailabilityFormPM'><form action='availability.jsp' name='availForm_PM' method='post'>
<table class='TableBorder'><tr class='TableHeading'><td colspan='2'>New activity PM</td></tr>
<tr class='TableData2'><td align='left'>Description:</td>
<td align='left'><input style='width:150px' type='text' name='description' value='Inbev' /></td></tr>
<tr class='TableData2'><td colspan='2'>
<input class='SolidButton' type='button' value='Update' onclick='javascript:updateSLine("PM");'/></td></tr></table></form></div>
CSS:
#AvailabilityFormAM {
float: left;
width:200px;
}
#AvailabilityFormPM {
float: left;
margin-left:200px;
}