Why wont the password confirmation stay inside of the div?

I am trying to wrap a form in a div and the only thing that seems to bee inside of the div is the email and password form fields. The password confirmation is acting like it is not inside of the div.

Here is the view. I have a partial called _sign_up_form.html.erb in the correct directory.

<div id="sign_up_form"> 
<%= render 'sign_up_form'%>
</div><!--end of the sign_up_form-->

Here is t开发者_Go百科he partial

    <%= form_for(@user) do |f| %>
  <% if @user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
      <% @user.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.text_field :email, :size => 40 %>
  </div>
  <div class="field">
    <%= f.label :password %><br />
    <%= f.password_field :password, :size => 40 %>
  </div>

  </div>
  <div class="field">
    <%= f.label :confirmation %><br />
    <%= f.password_field :password_confirmation, :size => 40 %>
  </div>

  <div class="actions">
    <%= f.submit 'Sign up', :controller => 'users' , :action => 'post'%>
  </div> 

<% end %>

I am trying to change the position of the form by doing this:

#sign_up_form{
    position:relative;
    left:400px;
    background-color:green;
}

The only part of the form that is turning green and moving is the email and password fields. The password confirmation and the submit button stay in the same spot and the background does not turn green. Why is this happening?

You have an extra </div> between the password and password confirmation fields - this is closing the sign_up_form div.