Floating forms next to each other

Question

I'm trying to float my 2 forms next to each other. Now in the results he puts these two under each other.

Here is my code:

<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;
}

score 1 · Accepted Answer · answered Apr 02 '13 at 14:07

1

You have an error in the name of two your element:

<id ='AvailabilityFormAM'>

There's no element 'id', it's probably just your attribute that has snuk up there.

My guess is that you're looking for a divider, like this:

<div id ='AvailabilityFormAM'>

and

And personally I'd change the second CSS rules to:

#AvailabilityFormAM, #AvailabilityFormPM {
float: left; 
width: 200px;
}

answered Apr 02 '13 at 14:07

user1898047

26
3

Thanks! Works perfect :) Stupid mistake! – user2206834 Apr 02 '13 at 14:32

score 0 · Answer 2 · answered Apr 02 '13 at 14:07

You're using ids wrong your html for your forms should look like this:

<form id ='AvailabilityFormAM' action='availability.jsp' name='availForm_AM'  method='post'>

and this:

<form id ='AvailabilityFormPM' action='availability.jsp' name='availForm_PM' method='post'>

Not sure you need such a large margin either.

Floating forms next to each other

2 Answers2