How do I get two buttons next to each other

Question

This is my view:

  <fieldset>
    <legend></legend>
    <br/>
      @using (Html.BeginForm("PrePayment", "Payment", FormMethod.Post))
      {
        <div align="left"> 
          <input id="btn" type="submit" value="Make a Payment" />
        </div>
      }
     @using (Html.BeginForm("DisplayLedger", "Customer", FormMethod.Post))
      {
        <div align="right"> 
          <input id="btn" type="submit" value="Display Activity" />
        </div>
      }
  </fieldset>

I am trying to get them centered and on the same line next to each other.

This is what is happening:

I'm new to css and I have tried several things but I can't seem to even get them on the same line.

Anyone have any ideas?

Answer 1

This is a simple CSS issue. To align boxes they have to use the same float, in this case "left". I've created a visual example here: http://jsfiddle.net/ktCng/

<div class="wrap">
    <div class="box left"></div>
    <div class="box left"></div>
</div>

<div class="wrap">
    <div class="box left"></div>
    <div class="box right"></div>
</div>​

.wrap{
  width: 200px;
  height: 100px;
  float: left;
  display: block;    
  border: 1px solid #000;    
}

.box{
 width: 50px;
 height: 50px;
 display: block;
}

.left{
  float: left;
  background: green;
}

.right{
  float: right;
  background: red;
}

​

Answer 2

Addressing styling issues only. And only really doing a quick and nasty job at that.

<fieldset>
    <legend></legend>
    <br/>
    <div style="text-align:center">
        @using (Html.BeginForm("PrePayment", "Payment", FormMethod.Post, new { style = "display:inline" }))
        {
          <input id="btn" type="submit" value="Make a Payment" />
        }
        @using (Html.BeginForm("DisplayLedger", "Customer", FormMethod.Post, new { style = "display:inline" }))
        {
          <input id="btn" type="submit" value="Display Activity" />
        }
    </div>
</fieldset>