The content will overlap if you have more than 60px worth of content because you have moved the top-nav to the top with absolute positioning and moved the other content away with a margin to match that height.
Your demo is already overlapping with the content that you have added which is over 60px in height. You can't really use that method if you want fluid height containers but would be ok for a fixed height topnav.
You can change left and right columns easily and you can even move the footer to the top and still have fluid content but you can't move an element that is between two others to be at the top or the bottom and still have fluid content in each.
I put up an old demo here that shows nearly all the combinations you can do with floats so if the design isn't in this list then it probably is not possible. (The js just swaps a class in the body so that the different styles will be applied and is not needed for a real layout).
This second example shows how to move the footer from the bottom to the top and both still have fluid content (this is a solution from a previous css quiz that I set and was deemed impossible before).