Alinhar três colunas

Olá pessoal. Eu preciso fazer um esquema com três colunas onde a do meio se ajuste de acordo com o tamanho da tela. Já tentei usando float:left na primeira e na do meio, mas a do meio cai pra baixo. Então fiz do jeito que está abaixo, só que agora quando eu coloco uma imagem para width:100% ela cai pra baixo da barra da direita puxando o texto junto.

Obrigado.

<div id="bloco0">
<div id="barraesq"></div>
<div id="bloco1">
<div id="barradir"></div>
<div id="conteudo">
<h1>Titulo</h1>
<span>

Texto <img src="1.png"/> Texto

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

#bloco0{
display: block;
overflow: auto;
}
#barraesq{
width: 160px;
height: 600px;
background-color: lightgrey;
float:left;
clear: left;
z-index: 1;
}
#bloco1{
margin-left: 180px;
 }
#conteudo{ min-width: 300px;
 float: left;
}

#conteudo img{

 width: auto;
 height: auto;
 margin: 0px;
}
#barradir{
 float: left;
 clear: right;
 margin: 0px 0px 0px 20px;
 width: 300px;
 height: 600px;
 background-color: lightgrey;
}