Lay-out líquido

Boa tarde pessoal!

Estou precisando de ajuda com css. Tenho duas colunas que devem preencher 100% da tela, independente da resolução e, se auto-ajustar caso o usuário modifique o tamanho da janela.

O código que tenho é:

CSS:

*
{

padding:0;
margin:0;
border:0;
}

html, body
{

margin:0;
padding:0;

text-align:center; / hack para o Internet Explorer /

height:100%;
}

#colEsq

{

float:left;
width:270px;
height:100%;
background:url(../images/site/fundoColEsq.jpg) top left repeat-y;
}

#colDir

{

margin-left:270px;
height:100%;
background:#FFF;
}

A idéia é que a coluna da esquerda fique em 270px de largura e a da direita preencha o restante. Num primeiro momento isso funciona, mas acontece que nesta coluna da esquerda tenho um menu com accordion e, quando o menu é aberto e ultrapassa a área da janela, a imagem de fundo da coluna da esquerda não acompanha. O que devo fazer para corrigir este problema? Obrigado.