complete css guide

Page layout properties

Introduction to positioning with CSS

One of the most significant limitations of HTML has been the inability to lay pages out in the same way they are laid out on paper. It can be possible, although not always, to lay out pages using tables and transparent 1 pixel gifs, but this both violates our principle of separating content from appearance, and is guaranteed to cause maintenance headaches until the end of time, as new browser versions fail to lay out the pages exactly as they worked in older browsers. This method really is something to be avoided, and now that we have page layout properties courtesy of CSS, there really is no excuse for using it.

So how are page layout and style sheets related? The original cascading style sheets recommendation included very little related to page layout. With CSS1

• the width and height of an element could be specified
• margin and padding could be specified on an element
• text-indent could be applied to the first line of an element
• float and clear provided the means to create columnar layout (up to a point)

Definitely lacking from this list is the ability to specify where the top or left hand side of an element should be, either relative to where it would otherwise be in the flow of the document, or in relation to the top left hand corner of the page.

To address this lack of positioning, CSS2 provided far more sophisticated positioning properties. We cover all these, as well as some background concepts and terms here.

The big picture

So what is missing from HTML when it comes to page layout? Let's think about desktop publishing for a moment. Software like Quark Express and PageMaker (and even less powerful page layout applications) generally allows the user to take blocks of content (text and or images) and place them directly on a page at any location. Blocks can overlap one another, and the front most block obscures blocks underneath it. With HTML, we can't do these things.

CSS2 provides the ability to do these kinds of "page layout" things.

A note about "layers"

Before we continue, it's best that we address an important source of misunderstanding, namely the idea of layers. Most developers will have heard of layers, and many will have developed some erroneous ideas about them. Let's try to clarify matters a little.

In the simple sense, there is no such thing as a layer. In a more complex sense, a layer is a metaphor, but layers themselves don't exist. But if you include Netscape's proprietary extensions to HTML, then yes Virginia, there is such a thing as a layer. Let me try and explain all this mess.

When we use the term layer, we generally mean an HTML container (or element) that can be placed at some specific location on a web page. Applications such as DreamWeaver use the term in this way. The first confusion that arises about layers in this sense is that it's often thought that a layer is a div and can only be a div . This isn't so. A layer in the sense of an HTML element placed somewhere on a web page can be any kind of element (a paragraph, a list item, whatever). Well at least in theory. In practice, Netscape Navigator 4 will let you position paragraphs and some other elements using CSS2, while Internet Explorer 4 and 5 really does think that a layer is a div. But more of this later.

So, hopefully we've cleared up the first and second causes of uncertainty. There is no such thing as a layer HTML element, rather, layer is a term for any HTML element that is positioned on a web page using CSS2.

However, if you take Netscape's word for it, there is such a thing as an HTML layer, namely the <layer> element. This was a Netscape extension to HTML, that has never been adopted by Internet Explorer, and is certainly not recommended HTML. Simply ignore it, and it should go away. Indeed it has already done so, as Netscape 6 does not support this element.

Having hopefully cleared up these possible stumbling blocks, let's get down to understanding how positioning works.

And <div>s?

The <div> is the generic block element. You can place other elements such as <paragraph>s inside <div>s, and then the whole block can easily be positioned on the page. But just because you use a <div> does not mean you have to give this <div> position properties at all. And, on the other hand, you don't need to use a <div> in order to use positioning - you can use positioning for any HTML element. Note though that some older browsers only supported positioning properties when they were applied to the <div> element.

Ways of positioning

The CSS2 recommendation provides a model for how elements can be positioned. Essentially there are four different ways in which an element can be positioned on a page, with a couple of complicating factors.

Static positioning

Static positioning is easy. It's how pages are already laid out by a web browser. A web browser takes an HTML file, parses it into its elements, applies style from a style sheet (or if there is none, from a default style sheet) and then "flows" the elements onto the page. The position that an element, say a paragraph, has in this flow is its static position. We'll need to remember static positioning when we get to relative positioning below.

Absolute positioning

Absolute position is what we are all so excited about. In a nutshell, it lets a developer say where the top left hand corner of an element should be located with respect to its parent element. It is not with respect to the window. Don't get absolute positioning confused with relative positioning, which we'll look at below.

Fixed positioning

Fixed position is closely related to absolute position. When an element is absolutely positioned, it's positioned with respect to the element which contains it. When the page is scrolled, the element also scrolls. Wouldn't it be nice if we could position elements with respect to the top of the window, so that regardless of how the page is scrolled, the elements remain fixed? You guessed it, fixed positioning provides precisely this feature. With fixed positioning and the <object> element in HTML 4, we can do away with frames forever, yet gain all the advantages, with none of the disadvantages of the FRAME construct.

Relative positioning

Relative positioning is probably a little unfortunately named. Positioning relative to what? A lot of people jump to the conclusion that relative positioning is when you specify a position with respect to the parent element, and absolute positioning is when the position is specified with respect to the top left hand corner of the page. But as we have just seen, this is not how it works at all.

OK, so what is relative? In essence, relative positioning places an element with respect to where it would statically be positioned. When you relatively position an element, as a developer you are saying to a browser: "hey, take this paragraph, and put it 10 pixels down and 10 pixels to the right of where it would normally be."

There is another complicating factor. What if we have a relatively positioned parent element, with an absolutely positioned child element? By analogy with absolute positioning you'll probably guess that the absolutely positioned child element will be placed with respect to the top left hand corner of the parent element.

The issue of positioning isn't particularly difficult, I trust, but it is a bit tricky. I hope this irons out the issue of the different kinds of positioning available in CSS2. Below we'll look at how to put these into practice.

Positioning enables very sophisticated page layout, but as with any powerful technology, it is complicated at times.

The page layout properties are:

• position
• top
• left
• bottom
• right
• width
• min-width
• max-width
• height
• min-height
• max-height
• z-index
• visibility
• overflow
• float
• clear
• clip

position

What it does

If you want to position an element you have to specify not just a set of coordinates that say where you want it to be, you also have to specify what these coordinates are with respect to. The position property is used to determine what the coordinates are with respect to, or how the element will be drawn. The actual position (the where) is specified using the top, left, bottom and right properties which we cover below.

Possible values

Elements can be positioned in one of four ways: statically, relatively absolutely or fixed. The value is specified by one of four keywords: static, relative, absolute and fixed.

These values are explained in detail above, but to recap:

When the position of an element is static, the browser will draw the element in the usual place. Essentially, this is the traditional positioning used with HTML.

When the position of an element is relative, it is placed with respect to its natural position, that is, with respect to where it would be if statically positioned.

For example, with a relative position, a top of 20px and a left of 20px (we'll look at the top and left properties very shortly), an element is placed 20px to the right and 20px down from where it would naturally, or statically be located.

With absolute positioning, an element is placed in a specified location with respect to its parent element. If the parent element is the <body>, the location of the element may appear to be with respect to the window. However, when the page is scrolled it should be apparent that it is not: the element will move so it is no longer (for example) 20px from the top of the window. However, it is in fact still 20px from the top of the <body>.

fixed positioning is different. Here the element really is positioned with respect to the window. This means if the page is scrolled, the element remains onscreen, fixed with respect to the top and left of the window.

Applications like Dreamweaver and GoLive create <div>s with absolute positioning, plus values for top and left, width and height, to build page layout. This is because, as you'll see in the browser support information on this page, for a long time this was the only way you could use CSS positioning and expect support in even the most recent browsers. The level of support, however, has improved.

Default values

When no position property is specified, an element has a static position.

Is it inherited?

An element does not inherit the position property of its parent.

Hints and suggestions

Take some time to consider the differences between the different types of positioning.

top

What it does

The top property specifies where the top of an element will be placed. Remember, though, to position an element you must also specify a value for its position property.

top is an offset from either

• the top edge of the natural location of the element (for position: relative)
• the top of the parent element (for position: absolute)
• the top of the window (for position: fixed)

See position above for more on what the individual values mean.

Negative top values move an element up the page, positive top values move the element down the page.

For elements with a position: static, top has no effect.

Possible values

The top of an element can be specified using length values, percentage values, or using the auto keyword.

Length values

When the top is specified using a length value, the element is offset up or down the page with respect to a location determined by the position value of the element.

We cover length values in detail in our section on values.

Percentage values

When top is specified as a percentage value, the element is offset up or down the page by this percentage of the height of its parent element.

We cover percentage values in detail in our section on values.

Auto

A top of auto places the element with no offset up or down the page.

Default values

If no top is specified, the top of the element is auto.

Is it inherited?

An element does not inherit the top of its parent, however, an element may be affected by the positioning of its parent element.

Hints and suggestions

top specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position property works to ensure that you achieve your desired outcomes. We cover the position property in detail above.

left

What it does

The left property specifies where the left of an element will be placed. Remember, though, to position an element you must also specify a value for its position property.

left is an offset from either

• the left edge of the natural location of the element (for position: relative)
• the left of the page or the left of the parent element (for position: absolute)
• the left of the window (for position: fixed)

See position above for more on what the individual values mean.

Negative left values move an element leftwards along the page, positive left values move the element rightwards.

For elements with position: static, left has no effect.

Possible values

The left of an element can be specified using length values, percentage values, or using the auto keyword.

Length values

When left is specified using a length value, the element is offset to the left or to the right along the page from a location determined by the position value of the element.

We cover length values in detail in our section on values.

Percentage values

When left is specified as a percentage value, the element is offset to the left or to the right along the page by this percentage of the width of its parent element.

We cover percentage values in detail in our section on values.

Auto

A left of auto places the element with no offset leftwards or rightwards on the page.

Default values

If no left is specified, the left of the element is auto.

Is it inherited?

An element does not inherit the left of its parent. However, the left of an element can be affected by the position of its parent.

Hints and suggestions

left specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position property works to ensure that you achieve your desired outcomes. We cover the position property in detail above.

bottom

What it does

The bottom property specifies where the bottom edge of an element will be placed. Remember, though, to position an element you must also specify a value for its position property.

bottom is an offset from either

• the bottom edge of the natural location of the element (for position: relative)
• the bottom of the parent element (for position: absolute)
• the bottom of the window (for position: fixed)

See position above for more on what the individual values mean.

For elements with a position: static, bottom has no effect.

Possible values

The top of an element can be specified using length values, percentage values, or using the auto keyword.

Length values

When the top is specified using a length value, the element is offset up or down the page from a location determined by the position value of the element.

We cover length values in detail in our section on values.

Percentage values

When bottom is specified as a percentage value, the bottom edge of an element is offset up or down the page by this percentage of the height of its parent element.

We cover percentage values in detail in our section on values.

Auto

A bottom of auto places the element with no offset up or down the page.

Default values

If no bottom is specified, the bottom of the element is auto.

Is it inherited?

An element does not inherit the bottom of its parent.

Hints and suggestions

bottom specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position property works to ensure that you achieve your desired outcomes. We cover the position property in detail above.

right

What it does

The right property specifies where the right edge of an element will be placed. Remember, though, to position an element you must also specify a value for its position property.

right is an offset from either

• the right edge of the natural location of the element (for position: relative)
• the right of the parent element (for position: absolute)
• the right of the window (for position: fixed)

See position above for more on what the individual values mean.

For elements with a position: static, right has no effect.

Possible values

The right of an element can be specified using length values, percentage values, or using the auto keyword.

Length values

When right is specified using a length value, the right edge of the element is offset to the left or to the right along the page from a location determined by the position value of the element.

We cover length values in detail in our section on values.

Percentage values

When right is specified as a percentage value, the right edge of the element is offset to the left or to the right along the page by this percentage of the width of its parent element.

We cover percentage values in detail in our section on values.

Auto

A right of auto places the right edge of an element with no offset leftwards or rightwards on the page.

Default values

If no right is specified, the right of the element is auto.

Is it inherited?

An element does not inherit the right of its parent.

Hints and suggestions

right specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how the position property works to ensure that you achieve your desired outcomes. We cover the position property in detail above.

width

What it does

Not surprisingly, this property specifies how wide an element will appear on the page.

Possible values

width can be specified as a percentage, as a length value, or as auto.

Percentage values

When a width is specified as a percentage, its width is this percentage of the width of its parent. We cover percentage values in detail in our section on values.

Length values

A width can be specified as a length. Lengths are covered in detail in our section on values.

Auto

A width of auto is the default width of an item. This means it will be as wide as it needs to be to fully display its content.

Default values

If no value is set for the width of an element, its width is set to auto.

Is it inherited?

An element does not inherit the width of its parent.

Hints and suggestions

width was specified as part of the original CSS1 recommendation. It is modified in part by the CSS2 recommendation.

Using percentage values or relative length values such as em creates flexible pages that can be comfortably viewed on a wide range of devices.

min-width

What it does

This property allows you to specify a minimum width for an element. When the width of an element is calculated, should it be less than a value specified for min-width, the value for min-width will be used.

Possible values

min-width can be specified as a percentage, as a length value, or none.

Percentage values

When a min-width is specified as a percentage, its min-width is this percentage of the width of its parent. We cover percentage values in detail in our section on values.

Length values

A min-width can be specified as a length. Lengths are covered in detail in our section on values.

Default values

If no value is set for the min-width of an element, its min-width is set to none.

Is it inherited?

An element does not inherit the min-width of its parent.

max-width

What it does

This property specifies allows you to specify a maximum width for an element. When the width of an element is calculated, should it be greater than this property, max-width specifies the width of the element.

Possible values

max-width can be specified as a percentage, as a length value, or none.

Percentage values

When a max-width is specified as a percentage, its max-width is this percentage of the width of its parent. We cover percentage values in detail in our section on values.

Length values

A max-width can be specified as a length. Lengths are covered in detail in our section on values.

Default values

If no value is set for the max-width of an element, its max-width is set to none.

Is it inherited?

An element does not inherit the max-width of its parent.

height

What it does

The height property enables you to specify the height of an element in a number of ways.

Possible values

height can be specified as a percentage, as a length value, or as auto.

Percentage values

When a height is specified as a percentage, its height is this percentage of the height of its parent. We cover percentage values in detail in our section on values.

Length values

A height can be specified as a length. Lengths are covered in detail in our section on values.

Auto

A height of auto is the default height of an item. This means it will have only the height it needs to fully display its content.

Default values

If no value is set for the height of an element, its height is set to auto.

Is it inherited?

An element does not inherit the height of its parent.

Hints and suggestions

height was specified as part of the original CSS1 recommendation. It is modified in part by the CSS2 recommendation.

min-height

What it does

This property allows you to specify a minimum height for an element. When the height of an element is calculated, should it be less than a value specified for min-height, the value for min-height will be used.

Possible values

min-height can be specified as a percentage or as a length value.

Percentage values

When a min-height is specified as a percentage, its min-height is this percentage of the height of its parent. We cover percentage values in detail in our section on values.

Length values

A min-height can be specified as a length. Lengths are covered in detail in our section on values.

Default values

If no value is set for the min-height of an element, its min-height is set to 0.

Is it inherited?

An element does not inherit the min-height of its parent.

max-height

What it does

This property allows you to specify a maximum height for an element. When the height of an element is calculated, should it be greater than this property, max-height specifies the height of the element.

Possible values

max-height can be specified as a percentage, as a length value, or none.

Percentage values

When a max-height is specified as a percentage, its max-height is this percentage of the height of its parent. We cover percentage values in detail in our section on values.

Length values

A max-height can be specified as a length. Lengths are covered in detail in our section on values.

Default values

If no value is set for the max-height of an element, its max-height is set to none.

Is it inherited?

An element does not inherit the max-height of its parent.

z-index

What it does

Because CSS allows the absolute positioning of elements on a page, we need to take care of the situation where elements overlap. The "stacking order" is specified using the z-index property. It determines which elements will appear in front of others when they overlap.

Possible values

z-index is specified either by an integer, or by the keyword auto.

Integer Values

Where z-index is specified using an integer, given two elements with a common parent, the element with the higher z-index is in front of the one with the lower z-index.

There are however some complicating factors. An element's z-index is not applicable to the whole page, but only within that element's containment hierarchy. This means that the z-index of parent elements is important in determining which element obscures another. Let's try an example.

Suppose you have an absolutely positioned image with a z-index of 10 in a paragraph of z-index 1, and an image of z-index 2 in another paragraph of z-index 5. If the two images overlap, which obscures the other? In this case it is the image with the lower z-index, because its parent paragraph has the higher z-index. So the paragraph with the higher z-index obscures the one with the lower z-index, and as a consequence the contents of the paragraph with the higher z-index obscure the contents of the paragraph with the lower z-index, regardless of the z-indexes of the contents.

It's logical, if a little convoluted.

Another subtle aspect is the question of how to make the contents of an element be closer to the front of the page, or further from the front of the page than the element itself. When the z-index of an element is less than zero, then the parent element is closer to the front of the page, when the z-index of an element is more than zero, the element is closer to the front of the page.

Auto

When the z-index is specified as auto, the browser determines the place of an element in the stacking order according to a relatively complicated set of rules, but in a nutshell, it uses the order in which the elements appear in the HTML code of the page.

Default values

Where no z-index is specified, the z-index of an element is auto.

Is it inherited?

An element does not inherit the z-index of its parent element. However, the stacking of elements is relative to parent elements. That is, where we have two elements, both with child elements, then all of the child elements of the parent with the higher z-index are in front of all of the child elements of the other parent element.

Hints and suggestions

Although the rules associated with stacking seem complicated, they are in fact the intuitive way for stacking to work. If there are two elements, each with child elements, then it makes sense that all of the children of the front-most element would be in front of all of the children of the element behind.

This same rule can be applied recursively, so that within an element, if more than one child itself has child elements, then the children of the front-most child are all in front of the children of the other child. And so on ad infinitum.

visibility

What it does

While it might not at first seem to make much sense to make an element of a page invisible, in conjunction with Javascript, showing and hiding elements when a user clicks, or moves a mouse over an element, or even based on time, can be a powerful tool. The visibility property lets you make an element either visible or invisible.

Possible values

visibility can be specified as one of three keywords, visible, hidden and inherit.

A visibility of visible and hidden are straightforward.

A visibility of inherit specifies that an element should have the same visibility as its parent.

Default values

If no visibility is specified, an element has a visibility of inherit.

Is it inherited?

An element only inherits its parent's visibility if the element's visibility is set to inherit.

Hints and suggestions

An element with a visibility of hidden still affects the drawing and layout of a page. The page is still laid out as if the element were visible. If you would like page to be laid out as if the element were not there at all (and for the element to also be invisible) then the display property which we discuss elsewhere has a possible value of none, which has the described effect.

overflow

What it does

Because the width and height of elements can be set by an author, we may have the situation where an element is not big enough to fit its contents. What do we do when this occurs? For images, traditionally the image is scaled to fit the size of the element. CSS introduces the overflow property to let you specify how a browser should display an element where its contents do not all fit into its width and height.

Possible values

overflow can take the keyword values visible, hidden, scroll, and auto.

An overflow of visible means that the browser should increase the actual width and/or the height of the element to display all of its contents. If the element has a background color or image this arguably should not be extended behind the content.

An overflow of hidden means that the browser should 'clip' the contents, displaying only the contents which are visible within the specified width and height.

An overflow of scroll means that the browser should place scrollbars on the element whether or not the contents of the element have overflowed.

An overflow of auto means that the browser should add scrollbars as needed to enable users to scroll horizontally and/or vertically to show hidden contents of the element.

The last two values should be familiar to those who have worked with frames in HTML. Frames can have a scroll specified never, always and auto. These correspond to hidden, scroll and auto.

Default values

If no overflow is specified, the overflow of an element is visible.

Is it inherited?

An element does not inherit the overflow of its parent.

Hints and suggestions

Theoretically, with the overflow property, the need for frames is greatly reduced. Unfortunately, as of the time of writing, most browsers, particularly older ones, do not fully support the overflow property.

float

What it does

Of all the CSS positioning properties, float and clear are probably the two that most users will have had least exposure to.

float has a simple effect, but follows what can be a quite complicated set of rules. The effect of the float property is to take an element out of the flow and place it to the left or right of other elements in the same parent element.

Possible values

float can be specified by one of three keywords: none, left and right.

A float of none means that an element flows as it would naturally in the flow of its page.

A float of left means that an element is detached from the natural flow of the page, and is treated as a block element to the left of the rest of the contents of its parent element.

A float of right means that an element is detached from the natural flow of the page, and is treated as a block element to the right of the rest of the contents of its parent element.

Default values

If no float is specified, elements have a float of none.

Is it inherited?

An element does not inherit the float of its parent.

Hints and suggestions

Floating can be a tricky concept, although the basic effect is quite straightforward. Sadly too, float has only recently become well supported by browsers. In conjunction with clear, float can be used to make text and image flow around each other in the same way as they do in paper-based publications.

clear

What it does

The clear property can be used in conjunction with float to specify whether and or where an element allows floating alongside it. You can specify whether an element can have elements floated to its left, to its right, or at all. When an element does not allow floating on a side, where an attempt is made to float an element to that side, the element appears below the floated element.

Possible values

clear can be specified as any one of the keywords none, left right or both.

A clear of none means that an element allows floating on either side.

A clear of left means that an element does not allow floating on its left.

A clear of right means that an element does not allow floating on its right.

A clear of both means that an element does not allow floating on either it's left or its right.

Default values

If no clear is specified, an element has a clear of none, allowing floating on both sides.

Is it inherited?

An element does not inherit the clear of its parent.

Hints and suggestions

float and clear are properties that will become, when properly supported by browsers, very useful tools for creating pages which adapt to their readers' screens. Until recently, the support is limited and buggy, especially for complex cases. In conjunction with float, clear can be used to make text and image flow around each other in the same way as they do in paper-based publications.

clip

What it does

The clipping area is that part of an element that is actually drawn, regardless of the size or location of an element. By specifying an element's clip it is possible to show only part of the element at a time. I would classify this as one of the advanced features of CSS, with powerful but specialized uses.

Possible values

Currently, CSS allows the clip of an element to be specified as either a shape or by the keyword auto.

At present, the only kind of shape that is defined is the rectangle. We discuss the shape value more fully in our section on values.

A clip of auto means that the clipping area will match the extent of the element, that is its width and its height.

Default values

Where no value is specified, the clip of an element is auto.

Is it inherited?

An element does not inherit the clip of its parent, but see hints below for how the clip and the parent's clip work together to determine the actual region where the element will be drawn.

Hints and suggestions

While the clip specifies the clipping region for the element, the actual region in which the element is drawn is the intersection between the area in which the parent will be drawn and the clip of the element.

Note that the clip property can only be applied to elements that have a position value of absolute or fixed.

© 1997- western civilisation pty. ltd. Contact Us Search Site