Why is the floated element overlapping the element below and not the other way round?

Answer 1

Lose the float: left; on #p1{}, add a position:relative; to your div{} and position: absolute; top: 0; left: 0; to your #p2{}. Not sure what you're trying to achieve but if you rather keep the float: left; on #p1{} than you need to clear: both; on p{}.