Montando topo

Olá pessoal, estou iniciando meus trabalhos na programação web e ja perdi minhas primeiras horas da noite com um problema de formação de designer web.

Estou precisando dividir um topo em 3 partes, sendo que a parte da logo deverá ter tamanho fixo e as outras 2 partes que seus cumprimentos completem todo restante da pagina de acordo com a resolução do usuário, vejam um exemplo:

Deveria ficar assim

/applications/core/interface/imageproxy/imageproxy.php?img=http://img121.imageshack.us/img121/9387/toponew.jpg&key=40b7852678528d2e60b196e462e16dcdbd6e29c6f635f701cd474e546ae31032" alt="toponew.jpg" />

Mas não consigo encaixar a duas divs da direita, detalhe colocando tamanho fixo nelas eu consigo encaixar, mas o proposito é que elas se adaptem ao tamanho da resolução da tela.

/applications/core/interface/imageproxy/imageproxy.php?img=http://img8.imageshack.us/img8/7333/topoerro.jpg&key=9f85c142c060e93aaa785330ea214c849641e06e257e07aa3e24e4b310b5fc9d" alt="topoerro.jpg" />

Meu código CSS.

#topo{
 background-image: url("#{resource['img/topo-back.jpg']}");
 background-repeat: repeat-x;
 height: 144px;
 width: 100%;
 float: left;
}

#logo{
 background-image: url("#{resource['img/logo.png']}");
 background-repeat: no-repeat;
 height: 144px;
 width: 434px;
 float: left;
}

#barra{
 background-image: url("#{resource['img/barra.png']}");
 background-repeat: repeat-x;
 height: 35px;
 float: right;
}

#icons{
 background-color: #000000;
 height: 109px;
 width: 100%;
 float: left;
}

body{

 margin: 0;
 padding: 0;
}

Agradeço a todos pela participação.

Abraços