how to use min-width, max-width and width 100% [closed]

Question

Anybody please help me describing a suitable example of min-width max-width and width 100% and why should I use this specially for?

Edit

what should I use for min-width that most computers resolution may match. what should I use for max-width that most computers resolution may match.

Edit I need better example as yahoo.com use

Answer 1

min-width: If you set it 50px, then by default your div will be of width 50px. If the content inside the div has more width than 50px, then it(your div with min-width) will expand.

max-width: If you set it 50px and if the content inside the div has more width than 50px, then it(your div with max-width) will not expand, a horizontal scroll may appear depending on your overflow settings.

width:100% By default divs are of width 100% but if you have floating divs and you want to them to take all the horizontal space of their container, width:100% does help there.

Answer 2

it's very general, but:

• min-width is very useful in cases in which you have width set in % and you don't want to your element be too small.

  <div style="100%">
      <div style="width:30%;min-width:50px;"></div>
  </div>
  

So if parent div will be to small, child will have at least 50px.

Or you can use it if div is dependent of parent window width. Min-width has higher priority than width and max-width.

• max-width can be used in similar way.

• width:100% is explained in details here: http://www.impressivewebs.com/width-100-percent-css/