Tamanho em %

[arthurcastro 0]

Como proceder quando preciso colocar 3 blocos dentro de um container div de 100%? Queria que esses 3 blocos supostamente tivessem 100% juntos.
Tenho uma div de 100% e coloquei 3 blocos dentro dela, 2 blocos de 31% e 1 de 32%. Tem algum jeito de deixar o tamanho desses blocos certinhos pra que fique bom em qualquer resolução e de modo que eles fiquem no lugar sem descer? Minha tela tem 1366x768 e fica legal mas se pegar uma resolução maior sobra um espaço a direita e esse espaço só vai aumentando de acordo com a resolução.

Link para visualização: http://sophiseducacional.com.br/andamento/

#container{
float: left;
width: 100%;
height: auto;
text-align: center;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

#containerinside {
float: left;
width: 31%;
height: auto;
margin: 20px;
text-align: center;
padding: 10px;
background: #FFFFFF url("../imagens/conteudo1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

#containerinside2 {
float: left;
width: 32%;
height: auto;
padding: 10px;
margin-top: 20px;
margin-right: 20px;
text-align: center;
background: #FFFFFF url("../imagens/location-1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

#containerinside3 {
float: left;
width: 31%;
height: auto;
margin-top: 20px;
text-align: center;
background: #FFFFFF;
padding: 10px;
background: #FFFFFF url("../imagens/metodologia.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

[Natan S. 6]

Há muita duplicação de código desnecessária.
Você pode criar uma classe genérica BOX que contenha os estilos que ambos os contêineres possuam e utilizar uma segunda classe para aplicar um background diferente a cada uma delas.

Você pode fazer assim: https://jsbin.com/mabilatuzi/edit?html,css,output

Obs: Eu apliquei o box-sizing utlilizando o seletor * (seletor universal que seleciona todos os elementos) para que ele seja aplicado a todos os elementos da página mas você também pode aplicar somente a BOX desejar.

Para definir o background é só alterar o caminho dentro dos comentários que eu deixei e remover o background-color.

[arthurcastro 0]

Oi Natan. rsrsrs Sim... Ainda está uma bagunça, mas quando estou construindo o site faço assim, depois organizo kkkk. Então... Mas eu preciso de espaçamento entre eles. Daí se colocar 33% não dá certo. o Box 3 vai pra linha de baixo e aí volto na questão da resolução.

[Electronic 124]

1. Nas 3 div containners retire as regras o float, width, height, padding;
2. Nas div PAI adicione -webkit-column-count: 3;

E ajuste as margens

 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;

[arthurcastro 0]

Electronic, o seu dá um pouco certo! :D Ainda não consegui ajustar certinho. A coluna 1 muda pra coluna 2 e continua o conteúdo nela. kkkk Mas obrigado. A coluna não aumenta a altura automaticamente, acabo tendo que colocar o height. Você falou pra eu remover o height e o padding mas preciso deles. o width e o float deu pra ficar sem.