Aprenda Layout com CSSVocê pode criar um grid de caixas que preenchem a largura do navegador e quebram suavemente. Isso tem sido possível por muito tempo utilizando o float, mas agora com o valor inline-block da propriedade display é bem mais fácil. Vejamos exemplos de ambas as abordagens.
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}Estou flutuando!
</div>Estou flutuando!
</div>Estou flutuando!
</div>Estou flutuando!
</div>Estou flutuando!
</div>Estou flutuando!
</div>Estou flutuando!
</div>Estou flutuando!
</div>Estou flutuando!
</div>Estou flutuando!
</div>Estou flutuando!
</div>Estou utilizando a propriedade clear, logo não flutuo ao lado das outras caixas.
É possível obter o mesmo efeito utilizando o valor inline-block da propriedade display.
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}Eu sou um inline-block!
</div>Eu sou um inline-block!
</div>Eu sou um inline-block!
</div>Eu sou um inline-block!
</div>Eu sou um inline-block!
</div>Eu sou um inline-block!
</div>Eu sou um inline-block!
</div>Eu sou um inline-block!
</div>Eu sou um inline-block!
</div>Eu sou um inline-block!
</div>E eu não preciso utilizar clear neste caso. Show de bola!
Para utilizar o display:inline-block você precisará de um pouco mais de trabalho para dar suporte ao IE6 e IE7. Algumas vezes as pessoas falam sobre o inline-block ativando algo chamado hasLayout, mas você só precisa saber sobre isso para dar suporte a navegadores antigos. Veja o link anterior sobre o suporte ao IE6 e IE7 se estiver curioso para aprender mais. Se não, vamos continuar.