Como devo utilizar o float

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