2 HTML forms side to side

Question

I need to put a Confirm button and a cancel button in a page.

I chose to create to forms with different actions, but the 2 buttons (forms) are not displayed side-to-side.

How do we do it without a table?

Thank you!

Answer 1

Make both "float: left". And make the element after them "clear: both";

Should work :)

Answer 2

You can do this without floats, if you set the form and every element inside it to be display inline then they will sit next to each other. The reason they are not side by side is because forms, just like divs and paragraphs are block level elements, setting them to be display inline will fix this.

For Example

.button-container form,
.button-container form div {
    display: inline;
}

.button-container button {
    display: inline;
    vertical-align: middle;
}

With the following HTML

<div class="button-container">
    <form action="confirm.php" method="post">
     <div>
      <button type="submit">Confirm</button>
     </div>
    </form>

    <form action="cancel.php" method="post">
     <div>
      <button type="submit">Cancel</button>
     </div>
    </form>
</div>