March 31, 2011

resizing div width with browser resize

Question by leora

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 by clairesuzy

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 by Starx

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

For example,

#wrapper { width: 90%; }

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!