Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Chapter 7: The Box ModelIn Figure 7-32, you can see that IE 6 does not correctly interpret CSS dimensions. You can also see thatthis bug has been fixed in IE 7, because it correctly overflows the excess content as Safari, Firefox, andOpera do. In IE 6, width and height are closer to the definition of the CSS min-width and min-heightproperties that I talk about later in this chapter.The next section continues the discussion of dimensions with auto values for width and height.Auto Values for width and heightBy default, width and height properties have an auto value. So, when you do not specify a width orheight, the value is the auto keyword. The meaning of the auto keyword changes depending on thetype of element that it is applied to. When used on a element, the element spans all the horizontalspace available to it and expands vertically to accommodate any content inside of it, including text,images, or other boxes. Elements with this behavior are called block elements. Some examples of blockelements are , , through , and elements. The example in Figure 7-33demonstrates auto width for block elements.Figure 7-33aThe CSS in Figure 7-33a is combined with the markup in Figure 7-33b.Figure 7-33bThe output that you see in Figure 7-33c is a result of the CSS in Figure 7-33a and the markup inFigure 7-33b. All three windows pictured display the same document, but at different sizes.249