Nivelar colunas na ficha RPG

Detalhes da questão

Endereço do fórum: http://kingdomofnardorwen.forumeiros.com/
Versão do fórum: PhpBB3

Descrição

Bem galera, eu to criando novos sistemas para um RPG que faço parte da administração, porém me deparei com uma coisa bem chata, criei os campos da ficha de RPG, separei em duas colunas, porém eles não ficam alinhadas, como no print a seguir:



Daí eu utilizei de um código para que o nivelamento acontecesse e até que ficou certo, porém bugou duas coisas, vou por os prints de como ficou.

Colunas alinhadas:



Porém o primeiro bug que reparei foi o seguinte: apareceu uma enorme espaço entre o fim da tabela e o botão modificar/salvar. Olhem o print:



Até ai tudo bem, lidar com um espaço no final da página é preço pequeno a se pagar pelo alinhamento, contudo não utilizamos o perfil avançado em nosso fórum, ou seja, todo o perfil fica em duas colunas em uma única pagina e o code utilizado para nivelar o perfil de RPG, desnivelou o perfil normal, como mostra o print:



Daí ficamos com um perfil alinhado, um perfil bugado e um espaço inútil. Não sabemos o que fazer para arrumar os bugs e ficarmos com o perfil de RPG alinhado.

Utilizei o code a baixo para fazer o alinhamento:

Código:

#profile-advanced-layout dl.details dt {
  display: none;
}

.column1 {
  position: relative;
  right: 90px;
}

.column2 {
  position: relative;
  top: -475px;
  right: 95px;
}

Vi também que o Kyo Panda respondeu algo semelhante neste tópico, dai eu retirei o code que havia posto e coloquei o seguinte (cedido pelo Kyo):

Código:

#cp-main .column1,
#cp-main .column2 {
  clear: none;
  margin-bottom: 15px;
}

Porém não teve nenhum efeito no fórum.

Atualmente o fórum se encontra sem nenhum code de alinhamento.

Crie um novo Javascript com investimento em todas as páginas com o seguinte código:

Código:

/* global jQuery */

(function($) {
  'use strict';

  $(function() {
    if (!/u\d+/g.test(location.pathname)) {
      return;
    }

    var $panel = $('h1.page-title:contains("Ficha")').next();
    var $left = $panel.find('.column1');
    var $right = $panel.find('.column2');

    $('<div>', { id: 'fa-sheet-left', class: 'column1' })
      .insertBefore($left.eq(0));

    $('<div>', { id: 'fa-sheet-right', class: 'column2' })
      .insertBefore($right.eq(0));

    $left
      .find('.details')
      .appendTo('#fa-sheet-left');

    $left.remove();

    $right
      .find('.details')
      .appendTo('#fa-sheet-right');

    $right.remove();
  });
}(jQuery));


Obrigado, Kyo! Resolveu.