Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Float

Não estou entendendo nada. Porque a definindo a box 4 como float:right ela nao vai pra direita da box3? essa seria a logica

4 respostas

Isso tudo depende de como o pai está em relação à ele.

Se todos tiverem float, sim, a caixa vai parar do lado direito, se não , só vai pro lado direito quem tem float.

Isso também depende de como o pai foi posicionado

position: relative;

faz o elemento que está dentro dele ficar à direita do pai.

Dá pra sacar ou ainda tá muito confuso?

Espero ter ajudado , se ficou confuso, posta aqui de novo pra gente te ajudar

EDIT: Corrigi a resposta que eu havia escrito errado e adicionei um exemplo

Depende da ordem como foi escrito o HTML. Veja o seguinte dabblet:

http://bit.ly/position43

Esse é o html desse exemplo que passei (ignorei os p):

<div id=primeiro>1</div>
<div id=segundo>2</div>
<div id=terceiro>3</div>
<div id=quarto>
    <div id=interno>4</div>
</div>

Para ficar igual ao exemplo, o CSS tem que ficar assim:

#primeiro {
    background: red;    
    float: left;
}
#segundo {
    background: blue;
    float: left;
}
#terceiro {
    background: green;
    float: right;
}
#quarto {
    background: yellow;
    float: right;
}
#interno {
    background: magenta;

}

div { height: 100px; width: 100px; }

Nele você pode alterar e testar como funciona o float para entender melhor.

Para ficar exatamente igual à resposta do exercício, a div do terceiro quadrado deveria vir depois da div do quarto quadrado.

solução!

Renan,

Como a caixa 3 já está com float: right a caixa 4 não vai para a direita dela, mas vai para a direita. Assim como acontece na esquerda, para a direita os elementos vão sendo adicionados um a atrás do outro conforme foram declarados no html.

Espero que tenha entendido. Abraço.

Obrigado a todos, agora ficou mais claro. :)