Ограничить текст основной частью веб-страницы

Question

Я пытаюсь настроить простую веб-страницу с тремя разделами, которые я настраиваю следующим образом.

.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;
     }

Однако проблема возникает, когда я сначала пытаюсь поместить текст в верхнюю часть, а затем, когда я пытаюсь поместить текст в основной раздел, он появляется поверх текста в верхней области, как показано в этой http://jsfiddle.net/2WZ2S/. Я хотел бы, чтобы кто-то предложил код для решения этой проблемы.

Answer 1

Похоже, ваш верхний край.main недостаточно велик, попробуйте .main { margin-left: 30px; position: absolute; left:300px; top:220px; right:0; bottom:0; }