Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 5 ■ BOX MODELS EXTENTS


Stretched cont.^

Location This pattern works on all elements except for inline elements.

Limitations Internet Explorer 6 cannot stretch absolute elements, but version 7 can. An
absolutely positioned table is stretched using width:100% and height:100%.

Example The star image is the only child inside a 50-pixel centered division, and is stretched
to all four sides of its parent. Notice how the float is not stretched perfectly because
its padding and border cause it to overflow its parent.

Tip Another way to stretch the width or height of an element is using the min-height or
min-width CSS properties. 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 min-height and min-width varies—for example, they are not
supported in IE6 and buggy in IE7, but fixed in IE8 and above.

Related to Width, Height, Sized, Shrinkwrapped; Static, Absolute, Float (Chapter 7)
Free download pdf