CSS Clearfix e ajuste de dimensão de tela.

Olá pessoal tudo bem? bom, é a primeira vez que faço perguntas aqui no site, escolhi aqui pois aqui me aparenta ter muitas pessoas querendo ajudar com qualidade. Estou desenvolvendo um portal para brasileiros que vão morar no Japão.

É o seguinte, quero trabalhar com 2 ou 3 colunas, mas para isso, estou tendo dificuldades na hora de posicionar e redimensionar as divs quando diminuímos a largura do navegador ou quando estamos vendo pelo celular.

Ocorre o seguinte: quando nós diminuímos a largura do navegador, a div da direita "encolhe" até um limite, depois diminuindo mais a div desce, até aí perfeito, mas ela desce e não completa o restante da tela ela fica encolhida. Veja a imagem.

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.burajirujin.com.br/ex/imagem01.jpg&key=ec94f3711df6f95242312039351f65fde7fb3586fd0aa53ce74f8cea04045422" alt="imagem01.jpg" />

Reduzindo ficaria:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.burajirujin.com.br/ex/imagem02.jpg&key=130c2e1d57b896cb0bad706db615d4ad166a28c2ed61e92dc8bdb01aa8be0b9c" alt="imagem02.jpg" />

Para a Visualização ficar certa, como fazer com que a área do circulo 1 complete o restante da tela?, ou seja, coluna da esquerda pegar 50% da área restante e a coluna do meio pegar as outros 50%, e a coluna da direita que desceu pegar 100% de área?.

Na tela do computador não fica problemático fica aceitável a visualização, mas na tela do celular isso não fica bom,

Gostaria que a reorganização ficasse igual a desse site, quando diminuir a largura: http://silviakikuchi.jp/

O site é www.burajirujin.com.br

Plataforma em Joomla, com tema protostar.

Muito obrigado pela atenção de todos, espero que possam me ajudar.