Divs com float ficam em baixo da outra quando diminui o browser

Estou fazendo um site responsivo, coloquei 4 divs do lado da outra e coloquei as imagem para diminuir conforme o browser, só que as divs ficam uma em baixo das outras

Código html:

<div id="barra">

 </div>

 <br />
 <br />
 <br />
 <br />

 <div id="capa">

 </div>

 <div id="estrutura">

 <div class="conteudo">

 <img src="imagens/funcao1.png" alt="img-responsiva" />

 </div>

 <div class="conteudo">

 <img src="imagens/funcao1.png" alt="img-responsiva" />

 </div>

 <div class="conteudo">

 <img src="imagens/funcao1.png" alt="img-responsiva" />

 </div>

 <div class="conteudo_lado_direito">

 <img src="imagens/funcao1.png" alt="img-responsiva" />

 </div>
 </div>

Código CSS:

 #barra{
 width: 100%;
 height: 60px;
 background: #0098E1;
 position: fixed;
}

 #capa{
 width: 100%;
 height: 520px;
 background: #CCC;
 margin: auto;
}

 #estrutura{
 max-width: 1300px;
 width: 100%;
 margin: auto;
}

 .conteudo{
 max-width: 318px;
 width: 100%;
 height: auto;
 float: left;
 margin: 9px 9px 9px 0px;

}
 .conteudo img{
 max-width: 318px;
 width: 100%;
 max-height: 250px;
 min-height: auto;
}

 .conteudo_lado_direito{
 max-width: 318px;
 width: 100%;
 height: auto;
 float: left;
 margin: 9px 0px 9px 0px;
}

 .conteudo_lado_direito img{
 max-width: 318px;
 width: 100%;
 max-height: 250px;
 min-height: auto; }