resizing div width with browser resize

Question

i recently asked this question on how to have a container div width set so i could avoid scrolling for folks with wide monitors. I got a great answer basically to combine min-width with display: block ;

I now have one follow up. The accepted answer works great if the browser up front is set to be wide but if at first its not wide and a user stretchs the window, the div container doesn't change or stretch.

is there anyway i can take this one step further and reset the width of the div when the browser window itself resizes.

Answer 1

you could use absolute positioning,

#panel {
 position: absolute;
 top: 50px;
 left: 50px;
 right: 50px;
 bottom: 50px;
 background: #eee;
 border: 3px double #000;
 overflow: auto;
 }


<div id="panel"><p>I shrink and grow</p></div>

overflow:auto; sets a scroll bar on the #panel itself if the content requires it.. which may not be desired?

Working Example

Answer 2

How about estimating the area of screen, your page should cover and writing the width in percentage?

For example,

#wrapper { width: 90%; }