| introduction ~ selectors ~ properties ~ advanced ~ real world CSS text style | text layout | background | border | margin | padding | page layout | element type | user interface | values |
 |
 |
 |
 |
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 layout 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
widthandheightof an element could be specified marginandpaddingcould be specified on an elementtext-indentcould be applied to the first line of an elementfloatandclearprovided 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
- 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.
Browser support
Detailed browser support information for this feature can be found in the Westciv CSS Guide, or in our CSS Browser Support Table.
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.
Browser Support
See the Westciv CSS Guide or our CSS Browser Support Table.
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.
Browser support
See the full Westciv CSS Guide or in our CSS Browser Support Table.
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.
Browser support
See the Westciv CSS Guide or our CSS Browser Support Table.
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.
Browser support
See the Westciv CSS Guide or our CSS Browser Support Table.
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.
Browser support
See the full Westciv CSS Guide or in our CSS Browser Support Table.
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.
Browser support
See the Westciv CSS Guide or our CSS Browser Support Table.
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.
Browser support
See the Westciv CSS Guide or our CSS Browser Support Table.
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.
See the full Westciv CSS Guide or in our CSS Browser Support Table.
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.
Browser support
See the Westciv CSS Guide or our CSS Browser Support Table.
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.
Browser support
See the Westciv CSS Guide or our CSS Browser Support Table.
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.
Browser support
See the Westciv CSS Guide or our CSS Browser Support Table.
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.
Browser support
See the Westciv CSS Guide or in our CSS Browser Support Table.
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 or right.
A clear of none means that an element allows floating on neither 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.
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.
Browser support
See the Westciv CSS Guide or our CSS Browser Support Table.
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.
Browser support
See the Westciv CSS Guide or our CSS Browser Support Table.
next: element type properties
(C)1997-2001 Western Civilisation Pty. Ltd.