Chapter 9. Positioning

9.1.3.1. Setting width and height

width Values <length> | <percentage> | auto Initial Value auto Applies to block-level and replaced elements Inherited no WARNING Percentage values refer to the width of the containing block.

height Values <length> | auto Initial Value auto Applies to block-level and replaced elements Inherited no

Figure 9-4. Filling the left half of the containing block

Figure 9-5. "Shrink-wrapping" a positioned element

Figure 9-6. Defining a height by using an explicit bottom

In this case, the height of the element must be 90% the height of the containing block, since 100% - - 10% = 90%. This assumes, of course, that there have been no margins, borders, or padding set for the positioned element; otherwise, the effective height would be decreased, although the entire element (content, padding, borders, and margins) would still be 90% as tall as the containing block.

Figure 9-7. Defining a height by using an explicit height

In this case, the placement of the bottom of the positioned element is the same as if we'd declared bottom: 55%, because 100% - - 45% = 55%.

Many of the same principles hold true for widths, of course. For example:

top: 100px; bottom: 200px; left: 30%; right: 10%; height: auto; width: auto;

Here, the width of the element is effectively 60% the width of its containing block.

As wonderful as all of this is, there arises a serious question. Suppose you have a positioned element that you don't want to be any smaller than a certain size? Consider the following styles:

top: 10%; bottom: 20%; left: 50%; right: 10%;

Thus the height is 70%, and the width 40% of the containing block's height and width. That's fine as far as it goes -- but what happens if the containing block is only 50 pixels tall by 200 pixels wide? That gives you an element only 35 pixels wide by 80 pixels tall. That doesn't leave much room to show the content, but if you use auto for the width or height, the element might fill its entire containing block, obscuring the containing block's contents.

As we'll see later in the chapter, you have the option to force your content to overflow the element. For now, however, let's concentrate on ways to deal with its width and height. You could try explicitly assigning a width and height, like this:

top: 10%; bottom: 20%; left: 50%; right: 10%; width: 30em; height: 15em;

However, this approach seems a little heavy-handed, and could have disastrous consequences in small browsing environments like handheld devices. Furthermore, it forces you to declare a specific height and width, which gives up a lot of flexibility. Wouldn't it be better to define certain limits for the size of the height and width?

9.1.3.2. Limiting width and height

min-width Values <length> | <percentage> | inherit Initial Value UA specific Applies to all elements except nonreplaced inline elements and table elements Inherited no WARNING Percentages refer to the width of the containing block.

max-width Values <length> | <percentage> | none | inherit Initial Value UA specific Applies to all elements except nonreplaced inline elements and table elements Inherited no WARNING Percentages refer to the width of the containing block.

min-height Values <length> | <percentage> | inherit Initial Value 0 Applies to all elements except nonreplaced inline elements and table elements Inherited no WARNING Percentages refer to the height of the containing block.

max-height Values <length> | <percentage> | none | inherit Initial Value none Applies to all elements except nonreplaced inline elements and table elements Inherited no WARNING Percentages refer to the height of the containing block.

The names of these properties make them fairly self-explanatory. Here we have one possible solution for the example given in the previous section:

top: 10%; bottom: 20%; left: 50%; right: 10%; 
  min-width: 20em; min-height: 30em;

Of course, this still isn't a very good solution, since it forces the element to be at least 20em wide by 30em tall. Here's a better one:

top: 10%; bottom: auto; left: 50%; right: 10%; height: auto; min-width: 15em;

Here we have a case where the element should be 40% as wide as the containing block but can never be less than 15em wide. We've also changed the bottom and height so that they're automatically determined. This will let the element be as tall as necessary to display its content, no matter how narrow it gets (never less than 15em, of course!).

We can turn this around to keep elements from getting too wide or tall by using max-width and max-height. Let's consider a situation where, for some strange reason, we want an element to have three-quarters the width of its containing block, but to stop getting wider when it hits 400 pixels. The appropriate styles are:

left: 0%; right: auto; width: 75%; max-width: 400px;

The great advantage of the min-max properties is that they let you mix units with relative safety. You can set percentage-based sizes while setting length-based limits, or vice versa.

Of course, it's still possible to use these properties to keep an element from exceeding a certain size, as in this:

max-height: 30em; max-width: 20em;

9.1.4.1. Overflow

overflow Values visible | hidden | scroll | auto | inherit Initial Value visible Applies to block-level and replaced elements Inherited no

This property only applies in one (or more) the following cases:

• When an element has negative margins.

• When a line box must be wider than its parent's content area, perhaps due to the existence of an unusually long word, nonwrapped text such as PRE text, or another circumstance where line-wrapping cannot occur.

• When a block-level box is wider than its parent's content area.

• When an element's box is taller than the height explicitly set for its parent.

• When an element has been absolutely positioned.

Figure 9-8. Overflowing the content area of an element

TIP

The specification does not say whether or not visible overflowed content can overlap the content of other elements, but it is reasonable to infer that this is possible. Since positioned elements can overlap other elements, it stands to reason that the content of a positioned element should be treated no differently.

Figure 9-9. Invoking a scrollbar with overflow

If the overflow is set to hidden, the element's content is clipped, but no mechanism should be provided to make the content accessible to the user. Consider the following styles:

DIV#sidebar {position: absolute; top: 0; left: 0; width: 15%; height: 7em;
  overflow: hidden;}

Figure 9-10. Clipping content with overflow

Finally, there is overflow: auto. This allows user agents to determine what behavior to use, although they are encouraged to provide a scrolling mechanism when necessary. This is a potentially useful way to use overflow, since user agents could interpret it to mean "provide scrollbars only when needed." (They may not, but they certainly could, and probably should.)

9.1.4.2. Overflow clipping

overflow-clip Values rect(<top>, <right>, <bottom>, <left>) | auto | inherit Initial Value auto Applies to block-level and replaced elements with an overflow value other than visible Inherited no

The default value, auto, means that the clipping region should have the same size and location as the element's content area. The other possibility is to define a clipping shape that is relative to the element's content area. This does not alter the shape of the content area, but instead alters the area in which content may be rendered.

TIP

While the only clipping shape available in CSS2 is a rectangle, the specification does offer the possibility that other shapes will be included in future specifications.

This is done with the shape value rect(top, right, bottom, left). We could specify no change in the clipping region like this:

overflow-clip: rect(0, auto, auto, 0);

This would be no different than declaring overflow-clip: auto. It's more interesting to shift the clipping area, of course. For example:

DIV#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em;
  overflow: hidden; overflow-clip: rect(0.5em, 4em, 6.5em, 1em);}

Figure 9-11. Contracting the clipping region

It is extremely important to note that the values for rect(...) are not side-offsets. They are, instead, distances from the upper-left corner of the element. Thus, a clipping rectangle which encloses a square 20 pixels by 20 pixels in the upper-left corner of the element would be defined as:

rect(0, 20px, 20px, 0)

The only values permitted with rect(...) are length values and auto, which is the same as "set the clipping edge to the appropriate content edge." Thus, the following two statements mean the same thing:

overflow-clip: rect(auto, auto, 10px, 1cm);
overflow-clip: rect(0, 0, 10px, 1cm);

Figure 9-12. Expanding the clipping area

This doesn't do much good, as you can see. The clipping rectangle extends up and to the left, but since there isn't any content there, the visual effect is the same as if the author had declared overflow-clip: auto.

Figure 9-13. Expanding the clipping region

This extends the area in which content can be seen. However, it doesn't change the flow of the content, so the only visual effect is that more content can be seen below the element. The text does not flow out to the right, because the width of its line boxes is still constrained by the width of the positioned element. If there had been an image wider than the positioned element, or preformatted text with a long line, this might have been visible to the right of the positioned element, up to the point where the clipping rectangle ends.

By then, however, it was too late: there was an implementation in the marketplace, and rather than force Microsoft to change the browser and thus potentially cause existing pages to break, the standard was changed to reflect implementation. This means, sadly, that it is impossible to set a consistent clipping rectangle in situations where the height and width are not precisely defined. For example, there is no way to create a clipping rectangle that is 1 em larger than this element's content area:

position: absolute; top: 0; bottom: 50%; right: 50%; left: 0;

Since there is no way to know how many ems tall or wide the element will be, there is no way to make a clipping rectangle that ends 1 em to the right, or 1 em below, the content area of the element.

9.1.4.3. Element clipping

clip Values rect(<top>, <right>, <bottom>, <left>) | auto | inherit Initial Value auto Applies to block-level and replaced elements Inherited no

<IMG SRC="foo.gif" STYLE="clip: rect(10px, auto, auto, 0);">

The auto values will set the clipping rectangle's bottom to align with the bottom of the image, and the right edge to the right edge of the image. The value of 0 for left keeps the left edge of the clipping rectangle against the left edge of the image, but the 10px for top moves the top edge of the clipping rectangle downward 10 pixels. This will cause the top 10 pixels of the image to become effectively invisible.

clip can be applied to any element. Thus, you could display only the top left corner of a paragraph using something like this:

<P STYLE="clip: rect(0, 10em, 10em, 0);">