div tasarımı

tablo kullanarak altta bulunan web sayfası için iskelet tasarımı rahatlık ile yapabiliyorum ama div ile ne şekilde yapılacağı konusunda bilgi sahibi değilim ve dreamweaver üzerinden eklemeye kalkınca sadece 1 adet olarak ekleniyor örnekte olduğu gibi bir tasarım nasıl yapabilirim birde sol div kısmına kaydırma çubuğu özelliği belirtmek istiyorum böylece include ile çekmiş olduğum php sayfası içerisinde gelen veriyi div bozulmadan kontrol etmek istiyorum

#main-div {
 width:100%; height:100%;
 position:relative;
}

#main-div .left-nav {
  width:15%; height:100%;
  position:absolute;
  overflow:scroll;
  left:0px; top:0px;
}
<!-- HTML -->
<div id="main-div">
     <div class="left-nav">
     </div>
</div>

Sanırım yukarıdaki kod işini görecektir, ancak %100 %15 verdiğim değerleri px olarak yaz tamamdır.

<style>#sol {
  float: left;
  width: 15%;
  height: 100%;
  border: 1px solid red;
  overflow:scroll;
}

#sag {
  width: 85%;
  height: 100%;
  border: 1px solid blue;
}</style>
<div id="sol"></div>
<div id="sag"></div>

yorumlar için teşekkür ederim Cred verdiği css kodu işimi gördü ama
ben sol div içerisine

<div id="sol" ><?php include('sol.php'); ?></div>

PHP sayfasını çağırıyorum kaydırma çubuğu gözüküyor ama başlıkları çekerken aşağıya doğru veriler devam ediyor ve kaydırma çubuğu pasif şekilde duruyor.