CODEWITHSUNDEEP
htmlcss
Takkun
Takkun

Reputation: 6361

CSS Two buttons next to each other, one in a form and one not

Is there any way to get these two buttons to line up side by side. The end of the form automatically throws out a new line.

<form>
....
<button id="regSubmit" class="sbutton"><span class="register">SIGN UP</span></button>
</form>
<button id="regReset" class="sbutton"><span class="reset">RESET FIELDS</span></button>

Upvotes: 0

Views: 1409

Answers (3)

Tadej Magajna
Tadej Magajna

Reputation: 2963

Try floating the second button to the right by adding a css rule:

#regReset { float: right}

or just by adding style to the button itself:

<button style="float: right" id="regReset" class="sbutton"><span class="reset">RESET FIELDS</span></button>

Upvotes: 0

Mikey G
Mikey G

Reputation: 3491

If you really can't have regReset button in the form, maybe try hiding the regReset button outside of the form, and have a button inside the form that clicks it in javascript:

<form>
....
<button id="regSubmit" class="sbutton"><span class="register">SIGN UP</span></button>
<button id="regResetBtnClicker" onclick="document.getElementById('regReset').click();" class="sbutton"><span class="reset">RESET FIELDS</span></button>
</form>
<button id="regReset" style="display: none;" class="sbutton"><span class="reset">RESET FIELDS</span></button>

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

With great difficulty, maybe.

Easiest thing to do is to add:

onClick="return false;"

To the second button. Although, by the look of it it's supposed to be a reset button for the form? Wouldn't <input type="reset" /> be more suitable?

Upvotes: 3

Related Questions