Solucionado
usei nesse site: http://dabblet.com/gist/ebbcecbea2f066b8238d
esse código funciona:
.primeiro, .segundo {
float: left;
}
.quarto, .quinto {
float: left;
}
.terceiro {
float: right;
}mas esse não, porque?
.primeiro, .segundo {
float: left;
}
.quarto, .quinto {
float: left;
}
.terceiro {
float: left;
}
O quadrado 3 no html está acima do quarto e quinto, se você manda ele flutuar para a direita vai encavalar fazendo que o 4 e o 5 quadrado que estava embaixo dele no html vão mais para baixo.
Mas se você manda flutuar para a direita você abre espaço para que o quadrado 4 e 5 fiquem no lugar de direito no html do 3 que é embaixo do 1 e o 2.
CSS é treino, treino e treino. Quanto mais treinar melhor vai ficar para entender e fazer CSS.
Oi Vitor fica mais fácil de entender se você aplicar as regras de uma por uma:
No começo tudo está na vertical e colado na esquerda.
primeiro flutuamos o primeiro e o segundo pra esquerda ,Observe como ficou o quadrado vermelho e azul, primeiro o azul depois o vermelho agora na horizontal.O quadrado verde quer subir só que já subiram na frente dele se a flutuação fosse pra direita ele subia pq haveria espaço pra ele subir certo.
Com a segunda regra :
.quarto, .quinto {
float: left;
}o quatro e o cinco ficarão também lado a lado na esquerda e o quadrado três lá atrapalhando eles de subirem mais, o três não consegue subir pra esquerda pq já tem quadrado um e dois na esquerda lá e a Ordem do fluxo faz diferença, pelo tamanho dele ele só pode subir pra direita.Com:
.terceiro {
float: right;
}Sempre que você quiser fazer um elemento flutuar para um lado você deve levar em consideração se já tem um elemento flutuando para aquele lado e também se existe espaço suficiente pra ele flutuar daquele lado.
Espero ter ajudado e bons estudos.
O Maison Galvão respondeu sua pergunta de forma perfeita. A questão aí é só mesmo falta de espaço para os quadrados 4 e 5 subirem.
Você colocou uma largura de 400px para a div container que por sinal é a div pai e 100px de largura para as divs filhas com exerção da div 5 que você atribuiu uma largura de 200px . Ao colocar float: left para as divs filhas todos os elementos irão subir, porém, só existe 400px de largura para conter as divs filhas.
1ª div 100px de largura
2ª div 100px de largura
3ª div 200px de largura
as 3 primeiras divs já tem 400px de largura e não tem mais espaço pra colocar as outras duas que juntas somam 200px de largura.
Se quiser fazer um teste é só colocar 600px de largura na div pai.