Como devo utilizar o float

[codercss 14]

Olá,

 

Estou com dificuldades em utilizar a propriedade float. E penso que não estou a fazer o uso correcto do positon.

 

Neste exemplo: https://jsfiddle.net/n9s031z2/

 

Pretendo que o conteúdo do nav e article dentro do section estejam lado a lado! Mas a partir do momento que aplico o a propriedade float - left e right, ele saem fora da tag section(borda verde) e main(borda vermelha). O que tem lógica, pois ficam a flutuar, um do lado esquerdo e outro do lado direito. Mas como consigo que eles fiquem no lado esquerdo e direito mas dentro da tag section e main.

Para auxiliar a explicação vejam as linhas verdes, que são as bordas do section e a linha vermelha que é a borda do main.

 

Penso que isto em haver com as propriedades position. Os valores de relative e absolute ainda não percebi bem! :/ Caso tenham algum artigo agradeço a partilha.

 

Obrigado e bons códigos

[manoaj 12]

overflow:hidden nas divs que englobam as com propriedade float.

[codercss 14]

Obrigado pela resposta,

 

Funcionou, mas o que essa propriedade vai fazer é anular o transbordamento. Mas não consigo entender a lógica da "coisa" :P A tag section, local onde apliquei a propriedade, não está a transbordar, pelo contrário, nem sequer considera as tags nav e article...

 

Podem-me dar mais umas luzes? Obrigado

[AndersonMamede 88]

Outra forma de resolver essa questão é mudar o display do container onde estão os elementos com float (no seu caso o section) para inline-block.

[codercss 14]

Obrigado pelas ajudas, as duas opções funcionam mas com uma ligeira diferença no resultado da página! Mas para as perceber terei que estudar mais a fundo a propriedade display e overflow.

 

Obrigado e bons códigos

[AndersonMamede 88]

Com prática vai pegando o jeito :D