fixing application form layout

dossier.html

{% extends 'base.html' %}
{% load i18n %}
{% load crispy_forms_tags %}
{% load placeholder %}
{% block extra_head %}
<!--[if gte IE 9]>
<style>
.ie_show { display:block }
.ie_hide { display:none }
</style>
<![endif]-->
{% endblock extra_head %}
{% block content %}
<section id="content-boxes" class="application-form">
  <div class="container">
    <div class="row">
      <div class="span12  content-box">
        <div class="wrapper">
          <form class="form-horizontal" action="" method="post" enctype="multipart/form-data">{% csrf_token %}
      <fieldset><legend>Личные данные</legend>
      <div class="row"> <!-- top row starts -->
        {{ wizard.management_form }}
        {% with wizard.form as f %}
        <div id="non-field-errors">{{ f.non_field_errors }}</div>
        <div class="span3"> <!-- leftmost column -->
          <div class="photo-upload-place">
          {{ f.photo }}
          <span class="text-wrapper">
            <span class="button load-photo">Загрузить фото</span>
            <span class="sub-text-wrapper" id="upload-message">
              jpg, gif или png
            </span>
            <span class="sub-text-wrapper" id="upload-confirm">
              Фотография выбрана
            </span>
            <span class="sub-text-wrapper" id="upload-filename">
            </span>
            {% if f.photo.errors %}
            <span class="help-inline">
              <ul class="unstyled">
              {% for err in f.photo.errors %}
                <li class="error">
                  <strong>{{ err|escape }}</strong>
                </li>
              {% endfor %}
              </ul>
            </span>
            {% endif %}
          </span>
          </div> <!-- end photo-upload-place -->
          <div class="photo-upload-alert">
            <div class="photo-upload-alert-wrapper">
              <p>Не пытайтесь спрятать ваше прекрасное лицо. Мы не оценим ваших необычных снимков, пожалуйста опубликуйте их в инстаграмм. Загружайте правильные фотографии!</p>
            </div>
          </div>
        </div> <!-- end leftmost column -->
        <div class="span4">
        {% with "intake/_styled_field.html" as t %}
          {% include t with field=f.first_name text="Дмитрий" %}
          {% include t with field=f.second_name text="Карамазов" %}
          {% include t with field=f.age text="16"  %}
          {% include t with field=f.location text="Скотопригоньевск" %}
          {% include t with field=f.education text="" %}
        {% endwith %}
        </div>
        <div class="span5 application-aux-info">
        {% with "intake/_styled_field.html" as t %}
          {% include t with field=f.main_activity text="Пишите максимально подробно: не только школу или вуз, но и класс, факультет, специализацию, отдел, должность и пр." %}
          {% include t with field=f.additional_activity text="Хобби, волонтёрские проекты, дополнительные профессии, увлечения" %}
          {% include t with field=f.about_self text="Вариант &laquo;Я &mdash; человек&raquo; наиболее правдив, но его недостаточно" %}
          {% include t with field=f.motivation text="У вас есть 500 символов, чтобы рассказать о предпосылках и окончательном решении" %}
        {% endwith %}
        </div>
      </div> <!-- top row ends -->
      </fieldset> <!-- end dossier -->
      <fieldset><legend>Контакты</legend>
      <div class="row">
      <div class="span3">
      </div>
      <div class="span4">
      {% with "intake/_styled_field.html" as t %}
        {% include t with field=f.telephone text="+7 (926) 666 9999" %}
        {% include t with field=f.email text="[email protected]" %}
        {% include t with field=f.skype text="cheburum_2031" %}
      {% endwith %}
      </div>
      <div class="span5 second-info-column">
      {% with "intake/_styled_field.html" as t %}
        {% include t with field=f.icq text="2128506" %}
        {% include t with field=f.facebook text="fb.me/serahim" %}
        {% include t with field=f.vkontakte text="vk.com/id666" %}
      {% endwith %}
      </div>
      </fieldset> <!-- end contacts -->

        {% include "intake/_navigation_wizard.html" %}
        {% endwith %} {# (wizard.form as f) #}
          </form>
        </div> <!-- div class wrapper -->
      </div> <!-- div class span12 content-box -->
    </div> <!-- div class row.. Wait.. WHY? -->
  </div> <!-- div class container -->
</section>
{% endblock content %}
{% block extra_scripts %}
<script src="{{STATIC_URL}}bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/autoresize.jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('textarea').autoResize();
        var alert_box = $('.photo-upload-alert').css("display", "none");
        var photo_place = $('.photo-upload-place').mouseover(function(){ alert_box.css("display", "block"); });
        photo_place.mouseout(function(){ alert_box.css("display", "none"); });
/*        $('.button').bind('click', function() {
            /** The Opera workaround: doesn't show the file-choosing-dialof if the input widget is hidden. *//*
            var photo_upload_widget = $('input[id=id_dossier-photo]').show();
            photo_upload_widget.click();
            photo_upload_widget.hide();
        });*/
    });
  $('input[id=id_dossier-photo]').change(function() {
      $('#upload-message').hide();
      $('#upload-confirm').show().css("display", "block");
      $('#upload-filename').text("(" + $(this).val().replace("C:\\fakepath\\", "") + ")");
  });
</script>
{% endblock extra_scripts %}