Confine text to main part of webpage

Question

I am trying to setup a simple webpage with three sections which i setup like this.

.top 
     {
     position:absolute;
     left:0; right:0;
     height: 80px;
     }

     .left 
     {
     position:absolute;
     left:0; top:80px; bottom: 0;
     width: 300px;
     }

     .main 
     {
     margin-left: 30px;
     position: absolute;
     left:300px; top:80px; right:0; bottom:0;
     }

However, the problem occurs when I first try to put text in the top, and then when I try to put text in the main section it appears on top of the text in the top area as demonstrated in this fiddle http://jsfiddle.net/2WZ2S/. I would like someone to suggest code to fix this problem.

Answer 1

seems like your .main top margin is not large enough try .main { margin-left: 30px; position: absolute; left:300px; top:220px; right:0; bottom:0; }