Problema com css

[Gustavo Bergonsi]

Estou tentando fazer um layout responsivo, fiz 4 divs, uma do lado da outra, mas quando vou diminuindo o browser a quarta div não diminui, ela cai para baixo.

Código em Html:
 

 

  <div id="estrutura">             <div id="tile">                    </div>               <div id="tile">                    </div>          <div id="tile">                    </div>                    <div id="tile">                    </div></div>  

 

 

Código em CSS:

 

 

  #estrutura{  max-width: 1400px;  width: 100%;  height: auto;  overflow: hidden;  background: #ccc;  margin: auto;  padding: 9px 0px 9px 9px;}   #tile{  max-width: 341px;  width: 29%;       height: 200px;  background: #ADADAD;  margin: 0px 9px 0px 0px;  float: left;}

[Virneto]

Viva @Gustavo Bergonsi,

 

Não utiliza id iguais para mais do que uma div. Os ids de elementos numa página devem ser únicos.

 

para arttibuir css comum para mais do que uma div faça-o com class (ex.: div class="nome").

[redhorse]

Olá

 

Você definiu width: 29%;

Mas como são 4 divs vai dar erro porque 4x29% = 116%. ERRADO

o tamanho das DIV's deve somados deve ser igual ou menor que 100%, isso quando se esta trabalhando com tamanhos em %

como são quatro DIV's, para elas ficarem do mesmo tamanho elas devem ter no máximo 25% de largura.

 

Mas veja bem, você definiu uma margem de 9px para cada DIV e ainda um padding na div estrutura, essas margens ocupam espaço logo DIV's com 25% de largura tambem não cabem.

 

OU seja

 

defina uma largura menor, faça o teste com 22% 23% 21%.