How to create two HTML buttons side by side

This is a snippet of code for two buttons. I want them to be side by side but currently, one button is on top of other. as you can see

HTML

 <div> <div> <button name="submit" type="submit" value="Save" onclick="myFunction()">Save</button> <button name="submit" type="submit" value="Cancel" onclick="myFunction2()">Cancel</button> <p></p> </div> </div> 

CSS

 .buttons { width: 960px; margin: 0 auto;} .action_btn { width: 500px; margin: 0 auto;} 

7 Answers

 .buttons { width: 200px; margin: 0 auto; display: inline;} .action_btn { width: 200px; margin: 0 auto; display: inline;}

<div> <div> <button name="submit" type="submit" value="Save" onclick="myFunction()">Save</button> <button name="submit" type="submit" value="Cancel" onclick="myFunction2()">Cancel</button> <p></p> </div> </div>

.btn{display: inline-block; margin-right: 20px;}

use this in css using the class or id of your button.

this means that you want the buttons to be side by side

One problem is that class action_btn is used for div and button and it interferes. Also in your code, div that has action_btn class look like extra and needs to be deleted. Considering the above, your code will be converted as follows.

.buttons { width: 960px; margin: 0 auto; } .action_btn { display: inline-block; width: calc(50% - 4px); margin: 0 auto; }

<div> <button name="submit" type="submit" value="Save" onclick="myFunction()">Save</button> <button name="submit" type="submit" value="Cancel" onclick="myFunction2()">Cancel</button> <p></p> </div>

.form-control { display: inline-block; vertical-align: middle; width: auto; height: 34px; padding: 6px 12px; font-size: 13px; line-height: 1.42857143; color: #555555; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; .form-control::-moz-placeholder { color: #999999; opacity: 1; } .form-control:-ms-input-placeholder { color: #999999; } .form-control::-webkit-input-placeholder { color: #999999; } .btn { display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #ffffff; background-color: #428bca; border-color: #357ebd; } /* additions */ .btn-inline { height: 34px; border-radius: 0 4px 4px 0; margin-left: -10px; } .form-control { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding-left: 10px; } .form-control:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }

<form> <button>Update</button> <button>Update</button> </form>

Change this:

.buttons { width: 960px; margin: 0 auto; } .action_btn { width: 500px; margin: 0 auto; } 

To this:

.buttons { width: auto; } .action_btn { width: auto; } 

Or simply delete those CSS rules altogether.

I have no idea why did you give such large numbers for the buttons' widths but the effect is that both buttons are too wide to fit side-by-side

Use float

<div> <div> <button name="submit" type="submit" value="Save" onclick="myFunction()">Save</button> <button name="submit" type="submit" value="Cancel" onclick="myFunction2()">Cancel</button> <p></p> </div> </div> 

And

.button{ float:left; margin:2px; } 

You want the buttons themselves to have inline-block in the css. Like this

 button.action_btn{display: inline-block;} 

Once you have that, add some padding and/or margins to separate them.