Position float left et right

Bonjour,
Pour présenter à des amis quelques balises html5, j'ai voulu faire un petit exemple tout bête. Et pourtant je n'arrive pas à trouver où est mon erreur.
J'utilise float left et right pour positionner.
Je pense que c'est un problème de clear:both, mais j'ai essayé pas mal de solution en utilisant <hr>, et je sèche.
Avant de m'arracher les derniers cheveux qui me restent, je vous soumets mon 'petit' problème.
Dans cet exemple, la dernière boite 'aside' ne s'aligne pas avec la boite 'article':
http://codepen.io/anon/pen/bovKk
Bien sûr cela fonctionne parfaitement si j'utilise un float:left pour un et un margin-left: pour l'autre sans float:right.
http://codepen.io/anon/pen/ldqaL

Un court croquis vaut mieux qu'un long discours, et j'espère que mes deux exemples sont parlant avec le code CSS et html.

Merci d'avance
jef

J'ai oublié de dire, que les exemples ne sont pas en html5. C'est un problème css3, et je n'utilise aucune balise html5.

Il est intéressant de regarder ton code avec des outils comme Firebug. En effet, ce genre d'outil met en évidence la place que prennent les différents éléments. On peut donc voir que ton div .cold1 a une hauteur de 210px, ce qui empiète sur les éléments du dessous. En supprimant cette hauteur, ça revient à la normale.

Ha ben ça alors, j'utilise firebug et je n'avais pas vu. Je me suis focalisé sur le deuxième div.
Effectivement en mettant height:auto; à cold1 le problème est résolu.
Merci pour cette réponse rapide.