not able to give space between buttons

Question

i have html form and css, to side my button side by side. but im not able to give space between the buttons.

here is my code:

<html>
<body>

<div class="custom-buttons">



<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" style="float:left;color:#fff" value="paste2"/></form>

<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" style="float:left" value="colSplit"/>
</form>


<p style="clear:floats"></p>

</div>


</body>
</html>

possible duplicate of [Adding space between buttons?](http://stackoverflow.com/questions/17644088/adding-space-between-buttons) — Chris Heath, Jul 11 '14 at 01:25

score 0 · Answer 1 · answered Jul 11 '14 at 01:12

0

The easiest way is to add margin to one of the inputs.

Style="margin-right:30px;"

You may see your code with the 30px space between inputs here: http://jsfiddle.net/d6g66/

answered Jul 11 '14 at 01:12

Nadine

559
2
15

score 0 · Answer 2 · answered Jul 11 '14 at 01:12

0

A jsfiddle or something to show it in action would be good or at least the css, but you should look into http://necolas.github.io/normalize.css/ for clear fix and without seeing your css, you should be able to use margins or padding.

answered Jul 11 '14 at 01:12

user2684452

701
2
14
31

score 0 · Answer 3 · answered Jul 11 '14 at 01:14

Give the custom-button class a width and change the second button to float:right

http://jsfiddle.net/v85sH/

The width can be pixel, percentage, anything you like and the two buttons will be spaced evenly to the left & right.

CSS

.custombuttons {
    width:100%;
}
.firstbutton {
    float:left;
    color:#fff;
}
.secondbutton {
    float:right;
}

HTML

<div class="custom-buttons">
    <form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
        <input type="submit" class="firstbutton" value="paste2" />
    </form>
    <form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
        <input type="submit" class="secondbutton" value="colSplit" />
    </form>
    <p style="clear:floats"></p>
</div>

score 0 · Accepted Answer · answered Jul 11 '14 at 01:14

In this instance, you want to set the form elements to float. From there, you can add a margin to the first form element.

<html>
<body>

<div class="custom-buttons">

<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank" style="float: left; margin-right: 5em;">
<input type="submit" value="paste2"/>
</form>

<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank" style="float: left;">
<input type="submit" value="colSplit"/>
</form>

</div>

</body>
</html>

not able to give space between buttons

4 Answers4