Pozicování HTML/CSS

Ahoj všichni,
mám takový problém s pozicováním objektů v HTML/CSS. Problém je v tom, že když dám overflow:scroll na nějaký objekt, tak mi to ten objekt "sežere" a má ho v sobě. Tedy - pokud bych aplikoval overflow:scroll na třídu vlevo, tak mi to sežere objekt střed .Lepší bude ukázka:

Byl bych rád za jakékoliv rady. Děkuji :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <style>
  body{text-align:center}
.main {background-color:red;
width:800;
height:600;
text-align:left;
margin 0 auto;}
.kos {background-color:red;
width:800;
height:600;
position:absolute}
.nahore {background-color:blue;
width:780;
height:100;
position:absolute;
top:10;
left:10;
}
.vlevo {background-color:blue;
width:280;
height:470;
position:absolute;
top:110;
left:0}
.stred {background-color:blue;
width:490;
height:470;
position:absolute;
top:0;
left:290}
  </style>
  </head>
  <body>  
  <div class = "main">
  <div class = "kos" >
  <div class = "nahore">
  <div class = "vlevo">
  <div class = "stred">
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  </body>
</html>