how to have two button in one line

I have a dialog box where I want to have two button side by side .One button will be "Done" button and other will be "close" button.

html:

    <a href="#" class="embeddedBrosweWindowDoneButton">clickme</a>

Css:

 a.embeddedBrosweWindowDoneButton {
 margin:10px 900px 0;
 text-align:center;
 display: block;
 width:50px;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 font-weight: bold;
 line-height: 1;
 /* button color */
 background-color: #173553;
 /* rounded corner */
 border-radius: 5px;
 /* drop shadow开发者_运维知识库 */
 box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 /* text shaow */
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;

 }

I already have a "done" button .I want to have another button called close buton by side of done button . How can i have two buttons in line. I tried but one button was over the other button.

   a.embeddedBrosweWindowDoneButton:hover {
  background-color: #6D7B8D;
  }

You have display set to block. It needs to be set to inline-block.

If you set it to block, the elements will reside on their own line within their parent container. Use inline-block to let them reside on the same line.

Put each button in a div and have the float attribute set to left.

.buttondiv {
    float: left;
}

This CSS-style:

display: block;

Makes the buttons set themselves on different rows. If you apply float: right; on them both, you'll be able to set them beside eachother. Note that you a) might want to add a clearfix and b) invert the order of your elements (adding done before the second button) as float: right has a tendency to shift them unexpectedly.

Clearfix:

<div style="display: block; clear: both; height: 1px;"></div>

Add the element above to the "bottom" of the element that wraps the buttons, so that they won't "break loose" from their place and float outside the box.

Since it's got a display:block;, you can specify it's width, and then float it left or right, depending on how you would like to have the layout be. Once one is floated, the other one will wrap to the other side of it.

Here's a good article about floats: http://css-tricks.com/795-all-about-floats/

Using nobr can help you solve this problem.

 <td>
       <nobr><input type="submit" value="Submit">
       <input type="button" value="Return"></nobr>
 </td>