How to align two form submits

Question

Hi Everyone, I have a page with two submit buttons at the bottom of the page. One for the submit of the page that posts to an action and another to cancel that posts to a different action. For whatever reason IE has a problem with placing these two buttons side by side. Firefox has no issue.

Here is my script:

<div class="button_row">
   using (Html.BeginForm("Edit", "Design"))
   { %> 
   <div class="button_cell_left">
      <input type="submit" value="Update" /> 
   </div>
   <% } %>
   <% Html.EndForm(); %> 

   using (Html.BeginForm("Review", "Design"))
   { %> 
   <div class="button_cell_right">
       <input type="submit" value="Cancel"/>
  </div> 
  <% } %> 
  <% Html.EndForm(); %>

Here is the css for those classes:

.button_row { float:left; width: 100%; }
.button_cell_left {float:left; width: 20%; }
.button_cell_right {float:left; width: 20%;  }

The 20% width is plenty room wise for those buttons. Like i said in ie they won't stay on the same line but in firefox they will. My question is why given my code?

Thanks in advance, Billy

Answer 1

Set a width in pixels, not %. IE have problems with % at times.

Answer 2

You need to float the forms they're wrapped in as well, IE doesn't implement float properly, so if you want 2 floats on the same line, they must both be floated. This issue was annoying me yesterday as well

New CSS:

.button_row { float:left; width: 100%; }
.button_row form {float:left; width: 20%; }

Answer 3

Your first input is missing it's self-closing slash.