Section A.6. Page Layout Properties | Dreamweaver CS3: The Missing Manual

A.6. Page Layout Properties

The following properties control the placement and size of elements on a Web page.

A.6.1. bottom

This property is used with absolute, relative , and fixed positioning (see Section A.1.1). When used with absolute or fixed positioning, bottom determines the position of the bottom edge of the style relative to the bottom edge of its closest positioned ancestor . If the styled element isn't inside of any positioned tags, then the placement is relative to the bottom edge of the browser window. You can use this property to place a footnote at the bottom of the browser window. When used with relative positioning, the placement is calculated from the element's bottom edge (prior to positioning). See Section 12.1.2.

Values : Any valid CSS measurement unit, like pixels, ems, or percentages. Percentages are calculated based on the width of the containing element.
Example : bottom: 5em ;

Note: Internet Explorer 6 and earlier can have a problem when positioning an element using the bottom property. See Section 12.1.4 for details.

A.6.2. clear

Prevents an element from wrapping around a floated element. Instead, the cleared element drops below the bottom of the floated element.

Values : left, right, both, none . The left option means the element can't wrap around left-floated elements. Similarly, right drops the element below any right-floated items. The both value prevents an element from wrapping around either left-or right-floated elements. None turns the property off, so you use it to override a previously set clear property. This trick comes in handy when a particular tag has a style that drops below a floated element but you want the tag to wrap in just one case. Create a more specific style (Section 5.3) to override the float for that one tag.
Example : clear: both ;

A.6.3. clip

Creates a rectangular window that reveals part of an element. If you had a picture of your high-school graduating class, and the class bully was standing on the far right edge of the photo, you could create a display area that crops out the image of your tormentor. The full image is still intact, but the clipping area only displays the bully free portion of it. The clip property is most effective when used with JavaScript programming to animate the clip. You can start with a small clipping area and expand it until the full photo is revealed.

Values : Coordinates of a rectangular box. Enclose the coordinates in parentheses and precede them by the keyword rect , like so: rect(5px,110px,40px,10px) ;.

Here's how the order of these coordinates works: The first number indicates the top offsetthe top edge of the clipping window. In this example, the offset is 5px , so everything in the first four rows of pixels is hidden. The last number is the left offsetthe left edge of the clipping window. In this example, the offset is 10px , so everything to the left (the first 9 pixels of the element) is hidden. The second number is the width of the clipping window plus the last number; if the left edge of the clip is 10 pixels and you want the visible area to be 100 pixels, the second number would be 110px . The third number is the height of the clipping region plus the top offset (the first number). So, in this example, the clipping box is 30 pixels tall (30px + 10px = 40px ).
Example : clip: rect(5px,110px,40px,10px );

Tip: Since the order of the coordinates is a little strange , most designers like to start with the first and last numbers, and then compute the two other numbers from them.

A.6.4. display

Determines the kind of box used to display a page elementblock-level or inline (Section 7.2.4). Use it to override how a browser usually displays a particular element. You can make a paragraph (block-level element) display without line breaks above and below itexactly like, say, a link (inline element).

Values : block, inline, none . The display property accepts 17 values, most of which have no effect in the browsers available today. Block, inline , and none , however, work in almost all browsers. Block forces a line break above and below an element, just like other block-level elements (like paragraphs and headers). Inline causes an element to display on the same line as surrounding elements (just as text within a <strong> tag appears right on the same line as other text). None makes the element completely disappear from the page. Then, you can make the element reappear with some JavaScript programming or the :hover pseudo-class (see Section 3.1).
Example : display: block ;

A.6.5. float

Moves ( floats) an element to the left or right edge of the browser window, or, if the floated element's inside another element, to the left or right edge of that containing element. Elements that appear after the floated element move up to fill the space to the right (for left floats) or left (for right floats), and then wrap around the floated element. Use floats for simple effects, like moving an image to one side of the page, or for very complex layouts like those described in Chapter 11.

Values : left, right, none. None turns off floating entirely, which comes in handy when a particular tag has a style with a left or right float applied to it, and you want to create a more specific style to override the float for that one tag.
Example : float: left ;

A.6.6. height

Sets the height of the content area the area of an element's box that contains content like text, images, or other tags. The element's actual onscreen height is the total of height, top and bottom margins, top and bottom padding, and top and bottom borders.

Values : Any valid CSS measurement unit such as pixels, ems, or percentages. Percentages are calculated based on the height of the containing element.
Example : height: 50% ;

Note: Sometimes, your content ends up taller than the set heightif you type a lot of text, for instance, or your visitor increases text size in her browser. Browsers handle this situation differently: IE 6 and earlier simply make the box bigger, while other browsers make the content extend outside of the box. The overflow property controls what happens in this case (see Section 7.5.2).

A.6.7. left

When used with absolute or fixed positioning (Section 12.1), this property determines the position of the left edge of the style relative to the left edge of its closest positioned ancestor. If the styled element isn't inside of any positioned tags, then the placement is relative to the left edge of the browser window. You can use this property to place an image 20 pixels from the left edge of the browser window. When used with relative positioning, the placement is calculated from the element's left edge (prior to positioning).

Values : Any valid CSS measurement unit such as pixels, ems, or percentages.
Example : left: 5em ;

A.6.8. max-height

Sets the maximum height for an element. That is, the element's box may be shorter than this setting, but it can't be any taller. If the element's contents are taller than the max-height setting, they overflow the box. You can control what happens to the excess using the overflow property (Section 7.5.2). Internet Explorer 6 (and earlier) doesn't understand the max-height property.

Values : Any valid CSS measurement unit, like pixels, ems, or percentages. Browsers calculate percentages based on the height of the containing element.
Example : max-height: 100px ;

A.6.9. max-width

Sets the maximum width for an element. The element's box can be narrower than this setting, but no wider. If the element's contents are wider than the max-width setting, they overflow the box, which you can control with the overflow property ( Section 7.5.2). You mostly use max-width in liquid layouts (Section 11.1) to make sure a page design doesn't become unreadably wide on very large monitors . This property doesn't work in Internet Explorer 6 (or in earlier versions).

Values : Any valid CSS measurement unit, like pixels, ems, or percentages. Percentages are calculated based on the width of the containing element.
Example : max-width: 950px ;

A.6.10. min-height

Sets the minimum height for an element. The element's box may be taller than this setting, but it can't be shorter. If the element's contents aren't as tall as the min-height setting, the box's height shrinks to meet the min-height value. Internet Explorer 6 (and earlier) doesn't recognize this property.

Values : Any valid CSS measurement unit, like pixels, ems, or percentages. Percentages are based on the containing element's height.
Example : min-height: 20em ;

A.6.11. min-width

Sets the minimum width for an element. The element's box may be wider than this setting, but it can't be narrower. If the element's contents aren't as wide as the min-width value, the box simply gets as thin as the min-width setting. You can also use min-width in liquid layouts, so that the design doesn't disintegrate at smaller window widths. When the browser window is thinner than min-width , it adds horizontal scroll bars. Internet Explorer 6 (and earlier) doesn't understand this property.

Values : Any valid CSS measurement unit, like pixels, ems, or percentages. Percentages are based on the containing element's width.
Example : min-width: 760px ;

Note: You usually use the max-width and min-width properties in conjunction when creating liquid layouts. See Chapter 11 (Section 11.4.3).

A.6.12. overflow

Dictates what should happen to text that overflows its content area, like a photo that's wider than the value set for the width property.

Note: IE 6 (and earlier) handles overflow situations differently than other browsers. See Section 7.5.2.

Values : visible, hidden, scroll, auto. Visible makes the overflowing content extend outside the boxpotentially overlapping borders and other page elements on the page. IE 6 (and earlier) simply enlarges the box (borders and all) to accommodate the larger content. Hidden hides any content outside of the content area. Scroll adds scroll bars to the element so a visitor can scroll to read any content outside the content areasort of like a mini-frame. Auto adds scrollbars only when they're necessary to reveal more content.
Example : overflow: hidden ;

A.6.13. position

Determines what type of positioning method a browser uses when placing an element on the page.

Values: static, relative, absolute, fixed . Static is the normal browser modeone block-level item stacked on top of the next with content flowing from the top to the bottom of the screen. Relative positions an element in relation to where the element currently appears on the pagein other words, it can offset the element from its current position. Absolute takes an element completely out of the page flow. Other items don't see the absolute element and may appear underneath it. It's used to position an element in an exact place on the page, or to place an element in an exact position relative to a parent element that's positioned with absolute, relative or fixed positioning. Fixed locks an element on the page, so that when the page is scrolled, the fixed element remains on the screenmuch like HTML frames . Internet Explorer 6 (and earlier) ignores the fixed option.
Example : position: absolute ;

Note: You usually use relative, absolute , and fixed in conjunction with left, right, top , and bottom . See Chapter 12 for the full details on positioning.

A.6.14. right

When used with absolute or fixed positioning (Section 12.1), this property determines the position of the right edge of the style relative to the right edge of its closest positioned ancestor. If the styled element isn't inside of any positioned tags, then the placement is relative to the right edge of the browser window. You can use this property to place a sidebar a set amount from the right edge of the browser window. When used with relative positioning, the placement is calculated from the element's right edge (prior to positioning).

Values : Any valid CSS measurement unit, like pixels, ems, or percentages.
Example : left: 5em ;

Note: Internet Explorer 6 (and earlier) can have problems when positioning an element using the right property. See Section 12.1.4 for details.

A.6.15. top

Does the opposite of the bottom property (Section A.1.1). In other words, when used with absolute or fixed positioning, this property determines the position of the top edge of the style relative to the top edge of its closest positioned ancestor. If the styled element isn't inside of any positioned tags, then the placement is relative to the top edge of the browser window. You can use this property to place a logo a set amount from the top edge of the browser window. When used with relative positioning, the placement is calculated from the element's top edge (prior to positioning).

Values : Any valid CSS measurement unit, like pixels, ems, or percentages.
Example : top: 5em;

A.6.16. visibility

Determines whether a Web browser displays the element. Use this property to hide part of the content of the page, such as a paragraph, headline, or <div> tag. Unlike the display property's none valuewhich hides an element and removes it from the flow of the pagethe visibility property's hidden option doesn't remove the element from the page flow. Instead, it just leaves an empty hole where the element would have been. For this reason, you most often use the visibility property with absolutely positioned elements, which have already been removed from the flow of the page.

Hiding an element doesn't do you much good unless you can show it again. JavaScript programming is the most common way to toggle the visibility property to show and hide items on a page. You can also use the :hover pseudo-class (Section 9.1) to change an element's visibility property when a visitor hovers over some part of the page.

Values : visible, hidden . You can use the collapse value to hide a row or column in a table as well.
Example : visibility: hidden ;

A.6.17. width

Sets the width of the content area (the area of an element's box that contains text, images, or other tags). The amount of onscreen space actually dedicated to the element may be much wider, since it includes the width of the left and right margin, left and right padding, and left and right borders. IE 6 (and earlier) handles overflow situations differently than other browsers. (See Section 7.5.2.)

Values : Any valid CSS measurement unit, like pixels, ems, or percentages. Percentages are based on the containing element's width.
Example : width: 250px ;

A.6.18. z-index

Controls the layering of positioned elements. Only applies to elements with a position property set to absolute, relative , or fixed ( Section 12.1). It determines where on the Z-axis an element appears. If two absolutely positioned elements overlap, the one with the higher z-index appears to be on top.

Values : An integer value, like 1, 2 , or 10 . You can also use negative values, but different browsers handle them differently. The larger the number, the more "on top" the element appears. An element with a z-index of 20 appears below an element with a z-index of 100 (if the two overlap). However, when the element is inside another positioned element, it's "positioning context" changes and it may not appear above another elementno matter what its z-index value. See Figure 12-6.
Example : z-index: 12 ;

Tip: The values don't need be in exact integer order. If element A has a z-index of 1 , you don't have to set element B's z-index to 2 to put it on top. You can use 5, 10 , and so on to get the same effect, as long as it's a bigger number. So, to make sure an element always appears above other elements, simply give it a very large value, like 10000 .