How can I get the <form> div to properly wrap my two <input type="button"> buttons?

For some reason my Submit and Cancel buttons are not being wrapped in the form tag like I expect them to be (based on their position with in the form tag in the HTML) when I have their float property set to right and left respective开发者_开发问答ly. The two buttons are positioned just outside & below the form div to the far right & left sides.

Link to the HTML & embedded CSS

alt text http://lh5.ggpht.com/_rNlSpSUBkYo/TFLpNgv4XkI/AAAAAAAAAE8/ocwa0uSzwX4/reply-float-form.png

How can I make it so the form div wraps the two buttons so they do not appear outside & below the form div?

Thank you

Adam

Remove .cancels float rule:

.cancel{/* no float */}

*tested on Chrome

Looks like you need to clear the floats. Give this a try.

<form action="#" method="get">
    <textarea name="Reply Textarea" type="text" rows="2" cols="40" wrap="soft"></textarea>
    <input id="buttons" class="submit" type="submit" value="Submit" />
    <input id="buttons" class="cancel" type="button" value="Cancel">
    <br style="clear: both;" />
</form>