2 HTML buttons that I want to be side by side on the same line

Question

I have 2 HTML buttons that I want to be side by side on the same line with the first (Submit Request(s)) button to be first. The problem that I am having is that the top of the second button starts where the bottom of the bottom button ends. The second button is correctly moved to the right because of the margin-left: 50px element. I have listed the HTML of the 2 buttons below:

<button style="float: left;" onclick="javascript:submitRequests();">
    Submit Request(s)
</button>
<button style="float: left; margin-left: 50px" 
        onclick="javascript:document.location.reload(true);">
    Reset
</button>

It works fine with the markup you've provided in Chrome 25. Can you provide a more complete example and tell us what browser you're experiencing the problem? — Daniel Imms, Mar 29 '13 at 15:27
probably the parent element doesn't have a large enough width so it pushes the second one down — nathan hayfield, Mar 29 '13 at 15:27
@JohnMitchell The website http://jsfiddle.net/ allows you to create an example that is easy to show. Just enter in HTML/CSS/JS, hit save and paste the URL in here. — Daniel Imms, Mar 29 '13 at 15:27

score 1 · Answer 1 · answered Mar 29 '13 at 15:41

try before use a Codepen or JsFiddle to add your code or idea.

I'm suggest you to see my porpose to this solution: http://cdpn.io/uKLga

You see it be simple you just add 2 class and define this buttons types (submit and reset) with these classes help you to format side by site.

score 0 · Answer 2 · answered Mar 29 '13 at 15:33

This should do the trick: http://jsfiddle.net/cau4t/

<div class="container">
    <button onclick="javascript:submitRequests();">Submit Request(s)</button>
    <button onclick="javascript:document.location.reload(true);">Reset</button>
</div>

.container {
    overflow: hidden;
}

button {
    float: left;
}

button:first-child {
    margin-right: 50px;
}

score 0 · Answer 3 · answered Mar 29 '13 at 18:21

0

As it turned out all I had to do was get rid of the spaces between the 2 buttons and now they are no longer offset. This was within a Drupal webform which seems to be picky about the extra spaces.

answered Mar 29 '13 at 18:21

John Mitchell

271
4
13

2 HTML buttons that I want to be side by side on the same line

3 Answers3

Linked