html - How to make a fluid sidebar? -

i'm creating sidebar css code:

.sidebar { position: absolute; z-index: 100; top: 0; left: 0; width: 30%; height: 100%; border-right: 1px solid #333; } 

but sidebar width doesn't scale when change browser width. how can make sidebar fluid?

thanks.

look @ height in body in css part.

here working example you:

your html:

<div id="content">  <p>this design uses defined body height of 100% allows setting contained left ,  right divs @ 100% height.</p>  </div>   <div id="sidebar">  <p>this design uses defined body height of 100% allows setting contained left ,  right divs @ 100% height.</p>  </div>  

your css:

body {  margin:0;  padding:0;  width:100%; /* key! */  }   #sidebar {  position:absolute;  right:0;  top:0;  padding:0;  width:30%;  height:100%; /* works if parent container assigned height value */  color:#333;  background:#eaeaea;  border:1px solid #333;  }   #content { margin-right: 200px; }