CODEWITHSUNDEEP
htmlcssformsbuttoncss-float
pylonicon
pylonicon

Reputation:

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 respectively. 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

Upvotes: 1

Views: 2934

Answers (2)

tcooc
tcooc

Reputation: 21249

Remove .cancels float rule:

.cancel{/* no float */}

*tested on Chrome

Upvotes: 2

Dustin Laine
Dustin Laine

Reputation: 38543

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>

Upvotes: 1

Related Questions