Eu gostaria de ter um layout que consiste em três divs adjacentes. As divs laterais têm largura estática (pode ser alterada por javascript) e a div central preenche a área restante. Quando o tamanho da primeira div muda, afeta apenas a do centro. É semelhante à tabela (com renderização dinâmica) que consiste em três coluna

Ok, mas onde está o problema. O problema é que, se eu colocar div flutuante à esquerda na primeira coluna e bloco div na segunda e terceira, os blocos div se comportam de maneira estranha. Eles são renderizados em sua coluna abaixo de div flutuante da primeira coluna.

Um exemplo. Na primeira e na segunda coluna, tenho div flutuante e bloco div na terceira coluna. A div do bloco é deslocada para baixo em torno da altura das divs flutuantes. A div na coluna central não é deslocada em sua posição y apenas porque ela possui a propriedade flutuante esquerda.

Gostaria que cada um dos três divs de layout fosse independente um do outro. Não faço ideia por que os elementos da terceira coluna flutuam div nas duas primeiras colunas (com propriedade float

CÓDIGO

<div style="margin: auto; display: table; width: 260px;">
        <div style="display: table-row;">
            <div style="display: table-cell; width: 100px;">

                <div style="float: left; width: 40px; height: 50px;">COL1</div> 

            </div>
            <div style="display: table-cell;">

                <div style="float: left; height: 50px;  width: 40px;">COL2</div>

            </div style="display: table-cell; width: 100px;">
            <div class="sideContainer">

                <div>COL3</div>

            </div>
        </div>
</div>

e resultado:resultad

Como consertar isso. Como tornar todas as divs de layout (colunas) independentes entre si. Alguma ideia