CODEWITHSUNDEEP
jquerycsshtmlwidth
leora
leora

Reputation: 196821

resizing div width with browser resize

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.

Upvotes: 2

Views: 3907

Answers (2)

clairesuzy
clairesuzy

Reputation: 27654

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

Upvotes: 5

Starx
Starx

Reputation: 79041

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

For example,

#wrapper { width: 90%; }

Upvotes: 0

Related Questions