In addition to controlling where the upper-left corner of an element is positioned, you can also control the width and height of the element and what happens to content that overflows its boundaries.

width

Remember how positioned text on the previous pages would still flow normally to the right? With the width property, you can control how far the text flows — that is, how wide the box that contains the element should be.

DIV { position: absolute; left: 200px; top: 40px; width: 150px }

The width property works only on absolutely positioned elements. You can use any length unit we've already discussed, or you can use percentage values, which refer to the parent element's width.

In IE 4 and 5, this property also works on images. You can artificially stretch or compress a graphic by setting width.

height

The height attribute works just like width, only in the vertical direction:

DIV { position: absolute; left: 200px; top: 40px; height: 150px }

overflow

What happens if the content of a box is bigger than the height and/or width you've defined for it? You can decide with overflow.

DIV { width: 150px; height: 150px; overflow: scroll }

Your choices are:

• visible — all the content will be displayed, even if it goes outside the declared boundaries of the box.

• hidden — the browser clips off whatever content goes "over the line." That is, it won't display part of the content.

• auto — the content will be clipped, but this time the browser will display a scrollbar if it's needed, so the user can get to the rest of the content.

• scroll — the content will be clipped, but this time the browser will always display a scrollbar, even if it's not required.

Now let's look at another CSS superpower: the power to be invisible.