They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

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.

Westciv Self Paced Courses

Learning web development using HTML 4, XHTML and CSS is easy and flexible with our hands on, self paced courses.

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.

position

Browser support

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.

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 staticposition.

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.

Auto

Default values

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.

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.

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.

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.

min-width

Browser support

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

Browser support

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.

min-height

Browser support

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

Browser support

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

Browser support

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.

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 lowerz-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

Browser support

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

Browser support

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

Browser support

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

Browser support

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, leftright 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

Browser support

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.