Aprenda o layout de CSSPodes criar uma grelha de caixas que se enche o a largura do browser e envolve agradàvelmente. Isto é possivel desde á bastante tempo utilizando float, mas agora com inline-block é ainda mais fácil. Vamos olhar para exemplos de ambas as maneiras.
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}Estou a flutuar!
</div>Estou a flutuar!
</div>Estou a flutuar!
</div>Estou a flutuar!
</div>Estou a flutuar!
</div>Estou a flutuar!
</div>Estou a flutuar!
</div>Estou a flutuar!
</div>Estou a flutuar!
</div>Estou a flutuar!
</div>Estou a flutuar!
</div>Estou a utilizar clear para não flutuar para perto das caixas acima.
</div>Tu consegues alcançar o mesmo efeito utilizando o valor inline-block da propriedade display.
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}Sou um bloco inline!
</div>Sou um bloco inline!
</div>Sou um bloco inline!
</div>Sou um bloco inline!
</div>Sou um bloco inline!
</div>Sou um bloco inline!
</div>Sou um bloco inline!
</div>Sou um bloco inline!
</div>Sou um bloco inline!
</div>Sou um bloco inline!
</div>Neste caso não preciso utiliza o clear. Nice!
Tu tens que fazer trabalho extra para o IE6 e IE7 suportarem o inline-block. Algumas vezes as pessoas falam sobre o inline-block disparar qualquer coisa chamada hasLayout, apesar de precisares saber sobre isto para suportar browsers antigos. Segue o link anterior sobre o suporte de IE6 e IE7 se estiveres curioso para aprender mais. Caso contrário, vamos continuar.