CSS Home

Page Layout with Cascading Style Sheets

Cascading Style Sheets allows you to move elements around the page and to layer them. See also Boxes.

bottom: This command allows the user to specify the vertical position of an element relative to the bottom of the page. The position can be specified in pixels, % or other units.

clear: This specifies which part of the page must be cleared before the next element is displayed. Options are both, left, right and none.

clip: This specifies which portion of an element is displayed. Options are auto, which displays the entire element box, and rect(top, right, bottom, left), which specifies the amount to be clipped from each side of the box.

float: This command moves an element box to the page margin, causing the other elements to wrap around it unless the clear command is used.

left: This specifies the horizontal distance from the left edge of the page to the left edge of the element box. The distance can be specified in pixels, % or other units.

overflow: This specifies what to do with content that will not fit in an element box. Options are auto, hidden, scroll or visible. Auto leaves it to the browser, hidden does not display the overflow content, scroll provides a scroll bar in the box and visible places the excess content outside the box.

position: This specifies the upper left corner of an element box relative to the upper left corner of the page. This command requires two parameters, horizontal and vertical position. The position can be specified in pixels, % or other units. Alternatively, one can use right, center or left for the horizontal position and top, center and bottom for the vertical position.

right: This specifies the horizontal distance from the right edge of the page to the right edge of the element box. The distance can be specified in pixels, % or other units.

top: This specifies the vertical distance from the top of the page to the top of the element box. The distance can be specified in pixels, % or other units.

visibility: This controls the visibility of the element. Options are hidden, inherit or visible. Hidden hides the element, visible displays it and inherit keeps it the same as the parent element.

z-index: This command allows layering of images and text. An element with a higher z-index will appear in front of an element with a lower index. The default is zero, so a z-index of -1 is good for a background image. You may create as many layers as you want.

©2003 All Rights Reserved