2 colunas

qq ta errado?!?!?!?!?

HTML:

<div class="esq" id="esq">
 <h2>texto</h2>
<p>textotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotexto</p>
 </div>
 <div class="dir" id="dir">
 <h2>texto</h2>
<p>textotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotexto</p>
 <h2>texto</h2>
<p>textotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotextotexto</p>
 </div><

CSS:

#esq {
 float: left;
 width:40%;
 }
#dir {
 float: right;
 width:40%;
 }

Quando eu faço o css igual o acime fica os 2 do lado direito... e se eu mudar qlqr coisa fica os 2 do lado esquerdo, e se eu colocar "inherit" no lugar do left fic certo mais o right fica abaixo... nao do lado como eu kero ___

* este erro so acontece no Mozilla =O

AHHHH meu esquece tem mto erros eu subi para você da uma olhada...

http://kenwebdesigner.com/erros_bizzaros/

Principalmente no mozilla ta dando o pior!