Two forms side by side without table

[b]with table[/b]

<table>
  <tr>

<form>
    <td>
      form1
    </td>
</form>

<form>
  <td>
    form2
  </td>
</form>
  </tr>

</table>

I have two forms like the above.
The second form is next to the first form.

But the following code makes the second form is under the first form.

[b]without table[/b]


<div>
<form>
 <span>
  form1
 </span>
</form>

<form>
  <span>
    form2
  </span>
</form>
</div>

How can I put the two forms side by side without tables?

You were complaining earlier in your other thread about validation errors. It seems you’ve forgotten that you need to have a block-level element immediately after <form>.
And the answer you’re looking for is that you need floats.

<form>
 <div>
  form1
 </div> 
</form>

<form>
  <div>
    form2
  </div>
</form>

Float the divs.


<div>
   <form>
      ....
   </form>
</div>

<div>
   <form>
      ....
   </form>
</div>

Each div container should be given a float:left and a width. Thats the short short answer.


<div style='float:left'>
<form>

  form1

</form>
</div>

<div>
<form>
    form2
</form>
</div>

The code above works fine.