How to display two buttons beside each other

Question

I have the following two buttons:

<div>
    <input type="button" id="slide_start_button" value="Start">
    <input type="button" id="slide_stop_button"  value="Stop">
</div>

I would put both one beside each other (for example |Start||Stop|). I can but I have to use the position: relative CSS rule and an empty space was below buttons that I don't want.

How can I put the two buttons each beside other in portable manner?

Solution 1

There are a few ways to get elements lined up next to each other

Using floats:

<input type="button" class="floated" id="slide_start_button" value="Start">
<input type="button" class="floated" id="slide_stop_button"  value="Stop">

.floated {
   float:left;
   margin-right:5px;
}

.floated {
  float:left;
  margin-right:5px;
}

<input type="button" class="floated" id="slide_start_button" value="Start">
<input type="button" class="floated" id="slide_stop_button"  value="Stop">

A con to this though is that you have to add an element after the floated elements with clear:both style in order for the container to expand to the height of the floated elements.

Using inline-block

<input type="button" class="inline" id="slide_start_button" value="Start">
<input type="button" class="inline" id="slide_stop_button"  value="Stop">

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

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

<input type="button" class="inline" id="slide_start_button" value="Start">
<input type="button" class="inline" id="slide_stop_button"  value="Stop">

inline-block has a benefit (if not more) over float as you do not need a clearing element after the floated ones, if needed.

A con of using inline-block though is that if you have your elements in your source on separate lines it will add a whitespace between your elements. There are several work arounds for this:

1. Using 0px font-size in parent and resetting the font-size in the child elements.
2. Putting all the elements next to each other, ie: <div></div><div></div>

3. Putting the closing tag on the next line and next to the next element, ie:

   <div>
   </div><div>
   </div>
   

4. Putting the closing bracket of the previous element on the next line and next to the next element, ie:

   <div></div
   ><div></div>
   

Though they do not make for neat looking source code

Using Flex

<div class="flex">
    <input type="button" class="flex-child" id="slide_start_button" value="Start">
    <input type="button" class="flex-child" id="slide_stop_button"  value="Stop">
</div>

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-child {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex:  1 1 auto;
    -webkit-flex:  1 1 auto;
    -ms-flex:  1 1 auto;
    flex:  1 1 auto;
}

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-child {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex:  1 1 auto;
    -webkit-flex:  1 1 auto;
    -ms-flex:  1 1 auto;
    flex:  1 1 auto;
    margin-right:5px;
}

<div class="flex">
    <input type="button" class="flex-child" id="slide_start_button" value="Start">
    <input type="button" class="flex-child" id="slide_stop_button"  value="Stop">
</div>

A couple of benefits of flex (among others) is that you do not have to worry about the whitespace between elements, and the elements can shrink and grow as needed by settings of the various flex styles.

You can see a guide for flex here

So you can choose what will suit your site layout needs best.

Solution 2

Using Bootstrap , this can also be achieved. Please find the below piece of html.

<div class="container">
  <div class="row">
    <div class="col-xs-2">
      <button type="button" id="slide_start_button" value="Start" class="btn btn-success">Start</button>
    </div>
    <div class="col-xs-4">
      <button type="button" id="slide_stop_button" value="Stop" class="btn btn-success">Stop</button>
    </div>
  </div>
</div>

Output:

Edit 2:

Another alternate is to use the button group which can yield the required result.

<div class="btn-group">
   <button id="slide_start_button" value="Start">Start</button>
   <button id="slide_stop_button" value="Stop">Stop</button>
</div>

Solution 3

In addition to floating them left, you can change the display property on the inputs to inline-block.

#slide_start_button, #slide_stop_button{
   display: inline-block;
   margin-right: 5px;
}