CODEWITHSUNDEEP
htmlcss
Saurabh Kumar
Saurabh Kumar

Reputation: 16661

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;
  }

Upvotes: 0

Views: 21743

Answers (5)

Elle Zhang
Elle Zhang

Reputation: 1

Using nobr can help you solve this problem.

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

Upvotes: -2

karllindmark
karllindmark

Reputation: 6071

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.

Upvotes: 2

spots
spots

Reputation: 2708

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

.buttondiv {
    float: left;
}

Upvotes: 2

uadnal
uadnal

Reputation: 11435

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.

Upvotes: 3

Connor
Connor

Reputation: 4168

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/

Upvotes: 0

Related Questions