CHAPTER 5 ■ BOX MODELS EXTENTS
Shrinkwrapped cont.Tip cont. These properties allow authors to constrain content widths and heights to a certain range, which
can either be a specific number of pixels, or a percentage of the corresponding dimension of the
containing block. Browser support for max-height and max-width varies—for example, they are
not supported in IE6 but are in IE7 and above.Related to Width, Height, Sized, Stretched; Static, Absolute, Float (Chapter 7)Stretched
HTML
<h1>Stretched</h1>
<div class="gp">Positioned Grandparent
<div class="parent">Non-positioned Parent
<span id="inline" class="s">Cannot stretch a static inline</span>
<div id="sized"><img id="star" src="star.gif" alt="star" /></div>
<div id="block" class="s">Horizontally Stretched Static Block</div>
<table id="table" class="s"><tr><td>Horiz. Stretched Table</td></tr></table>
<div id="abs-v" class="s">Vertically Stretched Absolute</div>
<span id="abs-h" class="s">Horizontally Stretched Absolute</span>
<span id="float" class="s">Almost Stretched Float</span>
</div>
</div>CSS
#star { width:100%; height:100%; }
#block { width:auto; }
#table { width:100%; }
#abs-v { height:auto; top:0; bottom:0; position:absolute; }
#abs-h { width:auto; left:0; right:0; position:absolute; }
#float { width:100%; float:left; }
/* Nonessential rules are not shown. */