Making two HTML buttons go side by side

Question

Okay, I'm not very familiar with HTML, or how it comes together with CSS. I have been looking all over on how to make two HTML buttons go side by side. Here is the code I'm currently using.

<FORM METHOD="LINK" ACTION="LINK TO WEBSITE" target="_blank">
  <input type="submit" value="Forum Home Page">
</FORM>
<FORM METHOD="LINK" ACTION="LINK TO A DIFFERENT WEBSITE" target="_blank">
  <input type="submit" value="Skill Guides">
</FORM>

No matter if I put them right after each other or put an alignment infront of them. I can't seem to get them to go next to each other. I hope there is someone that can easily and in a detailed way, help me out.

Why use forms or JavaScript when you actually want to link? You can always style a link to look like a button if you like. — Jukka K. Korpela, Jul 14 '12 at 06:36

score 17 · Answer 1 · answered Jul 14 '12 at 06:34

17

If I understand you correctly, you can just attach the following CSS:

form {
    display: inline;
}

As shown here: http://jsfiddle.net/zcz3j/

answered Jul 14 '12 at 06:34

Randall Ma

10,486
9
37
45

Well, How would I implement that? Just right after the two FORM tags? – Gavin Jul 14 '12 at 06:48

Satinder singh · Answer 2 · 2012-07-14T07:49:13.983

0

Demo http://jsfiddle.net/satinder_singh1/wr4Xv/1/

<div id="main">
<div class="floatdiv"><FORM METHOD="LINK" ACTION="LINK TO WEBSITE" target="_blank">
  <input type="submit" value="Forum Home Page">
</FORM></div>
<div class="floatdiv">
<FORM METHOD="LINK" ACTION="LINK TO A DIFFERENT WEBSITE" target="_blank">
  <input type="submit" value="Skill Guides">
    </FORM></div></div>

<style type="text/css">
    #main
    {
    position:relative;
        width:200px;
    }

    .floatdiv
    {
    float:left;
        width=80px
    }
</style>

edited Jul 14 '12 at 07:49

answered Jul 14 '12 at 06:36

Satinder singh

10,100
16
60
102

As i said, I still haven't quite understood how both HTML an CSS are set together. Please consider. – Gavin Jul 14 '12 at 06:51

score 0 · Answer 3 · answered May 21 '14 at 15:56

0

You could also try wrapping them in a table tag. That's how I fixed my similar issue. The table automatically set them side by side.

answered May 21 '14 at 15:56

Stevo

85
3
11

Making two HTML buttons go side by side

3 Answers3

Linked