ansaurus

Question

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

Answer 1

+2 A:

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>

Dustin Laine 2010-07-30 14:52:42

Yep, that will do it. The reason the floated elements need to be cleared is because as soon as you float something, it no longer interacts with its parent container (unless it's also floated) or any other non-floated elements further down in the markup. Clearing stops this.

Pat 2010-07-30 14:55:29

i just want to make sure i understand why this is happening and/or if this is a CSS bug i am encountering.

J3M 7OR3 2010-07-30 15:06:23

No this is not a CSS bug, it is by definition. See Pat comment above.

Dustin Laine 2010-07-30 15:52:13

@Pat thanks for the explanation @durilai thanks for answering with example. one thing. how come it works when the 'submit' button has a 'float:right' applied to it but the 'cancel' button has no float applied?

J3M 7OR3 2010-07-30 19:10:12

@durilai It works then because the cancel button is still in the normal document flow and therefore interacting with it's non-floated parent (the form). Something that helped me get the hang of it when I was starting was thinking about "rows" of floated elements. If you float all the elements in a row (i.e. you float both buttons) there's nothing left to interact with the form, and it collapses above the buttons because as far as it's concerned, there's no element there (the exception is IE6 which still allows non-floated parents to be affected by floated children because it hates coders).

Pat 2010-07-30 22:36:56

@Pat I understand you completely now. Thank you again :)

J3M 7OR3 2010-07-31 11:51:09

Answer 2

+2 A:

Remove .cancels float rule:

.cancel{/* no float */}

*tested on Chrome

digitalFresh 2010-07-30 14:56:34

yes this does work. can you explain why this works like this? doesn't logic say that it should work with both the buttons having their floats set? or is it that placing a float:left is already an innate behaviour of a non floated item and it just overkills it to include it?

J3M 7OR3 2010-07-30 15:05:30

giving a float:left/right style takes the element out of the "box", making it lose some inherited styles. Removing the `float:left` style puts the element inside the "box" and it also covers the `float:right` element.

digitalFresh 2010-07-30 15:27:45

ansaurus

tags:

views:

answers:

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

related questions