hack – O Desenvolvedor

Usando o .width em elementos invisíveis

            $(this).css({ position: 'absolute', display: 'block' });

	            var elemWidth = $(this).width();

	            $(this).css({ position: '', display: 'none' });

O que o hack faz é deixar o elemento com display block e position absolute (assim o jQuery não se perde na hora de calcular a largura do elemento), feito isso você pode usar o .width e voltar os valores do position e display do elemento para como estavam antes.

Já passaram por este problema? Como resolveram (ou resolveriam)?

Vai uma dica rápida de CSS para uma questão que acontece no Firefox: quando você tem dentro de um elemento block (uma div, por exemplo) outro elemento com float, esse elemento que flutua não força automaticamente a altura do elemento container; ou seja, ele não empurra a borda inferior para baixo.
Isso acontece porque nesse momento o elemento que está flutuando deixa de ter o container como pai dele.
O que se faz mais comumente por aí é colocar um elemento com clear:both antes do final do elemento container; o clear:both força que a borda inferior vá para baixo.
O ruim dessa técnica é que o seu html fica sujo, com um elemento a mais, como pode ser visto aqui:

<div>
    <div style="float:left; width:30%;">Algum conteúdo</div>
    <p>Texto que não flutua</p>
    <div style="clear:both;"></div>
</div>

Uma outra técnica, mais bonita, é fazer isso por CSS. Há tempos foi encontrada uma solução que se popularizou chamada de clearfix
Ela é uma classe CSS, como pode ser vista abaixo, que deve ser adicionada ao elemento container:

.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility: hidden;
}
.clearfix {display:inline;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

É usada essa propriedade :after para inserir um conteúdo via CSS no final do elemento que recebe essa classe. Nesse caso, é inserido um texto blocado e invisível. O elemento block, por si só, já é um elemento com clear:both.
As outras 3 linhas do código são para que o código de cima não afete os demais browsers.

<div class="clearfix">
    <div style="float:left; width:30%;">Algum conteúdo</div>
    <p>Texto que não flutua</p>
</div>

[WARNING] se você é um fanático por validação de código nos engines do W3C, nem precisa testar esse aqui, que ele não passa mesmo. Mais explicações aqui, ó, bem como um texto mais explicadinho sobre toda essa solução.[/WARNING]

jQuery – width de elemento hidden

Usando o .width em elementos invisíveis

clearfix – solução css para elementos float