| introduction | selectors | properties | advanced | real world CSS text style | text layout | background | border | margin | padding | page layout | element type | user interface | values |
 |
 |
 |
 |
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
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.
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.
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.
<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.
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 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 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 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 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:
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.
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.
When no position property is specified, an element has a static position.
An element does not inherit the position property of its parent.
Take some time to consider the differences between the different types of positioning.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | P | P | P | P | P | B | P | P | N | Y | N |
Internet Explorer 4.0 and 4.5 Macintosh and 4.0 Windows only supports position: absolute on div and span elements. To position an element absolutely you must put it inside one of these. The value fixed is not supported by these browsers at all.Later versions of all browsers, insofar as they support values for position, support them just as well on any element, not just div and span elements.Internet Explorer 5.0 Macintosh supports all the position values on any type of element. It has one irritating bug, however. If you create a fixed element, and place links in this element, the position of the "linked area" can become detached from the linked text when the page is scrolled. This is particularly irritating because using a fixed element would be a good way of creating a navigation bar that is always on screen, as we used to do with frames. Internet Explorer 5.0, 5.5 and 6.0 Windows does not support the value fixed either.Netscape Navigator 6 does not support the value fixed, treating it in the same way as static. |
|||||||||||
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
position: relative)
position: absolute)
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.
The top of an element can be specified using length values, percentage values, or using the auto keyword.
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.
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.
A top of auto places the element with no offset up or down the page.
If no top is specified, the top of the element is auto.
An element does not inherit the top of its parent, however, an element may be affected by the positioning of its parent element.
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | P | Y | Y | P | P | Y | B | Y | N | Y | N |
The older browsers in which this was partially supported only allowed positioning on a limited range of elements. Only div elements are guaranteed to take positioning in these browsers.Netscape 4.x: positioned elements which are the children of other positioned elements cause the entire layout to be ignored. Additionally when pages are resized all layout is subsequently ignored. |
|||||||||||
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
position: relative)
position: absolute)
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.
The left of an element can be specified using length values, percentage values, or using the auto keyword.
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.
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.
A left of auto places the element with no offset leftwards or rightwards on the page.
If no left is specified, the left of the element is auto.
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.
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | P | Y | Y | P | P | Y | B | Y | N | Y | N |
The older browsers in which this was partially supported only allowed positioning on a limited range of elements. Only div elements are guaranteed to take positioning in these browsers.Netscape 4.x: positioned elements which are the children of other positioned elements cause the entire layout to be ignored. Additionally when pages are resized all layout is subsequently ignored. |
|||||||||||
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
position: relative)
position: absolute)
position: fixed)
See position above for more on what the individual values mean.
For elements with a position: static, bottom has no effect.
The top of an element can be specified using length values, percentage values, or using the auto keyword.
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.
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.
A bottom of auto places the element with no offset up or down the page.
If no bottom is specified, the bottom of the element is auto.
An element does not inherit the bottom of its parent.
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| N | N | Y | Y | N | N | Y | N | Y | N | Y | N |
While bottom was not supported in older browsers it is a very handy property that is quite well supported in all the latest versions.
Combining |
|||||||||||
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
position: relative)
position: absolute)
position: fixed)
See position above for more on what the individual values mean.
For elements with a position: static, right has no effect.
The right of an element can be specified using length values, percentage values, or using the auto keyword.
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.
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.
A right of auto places the right edge of an element with no offset leftwards or rightwards on the page.
If no right is specified, the right of the element is auto.
An element does not inherit the right of its parent.
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| N | N | Y | Y | N | N | Y | N | Y | N | Y | N |
While right was not supported in older browsers it is a very handy property that is quite well supported in all the latest versions.
Combining |
|||||||||||
Not surprisingly, this property specifies how wide an element will appear on the page.
width can be specified as a percentage, as a length value, or as auto.
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.
A width can be specified as a length. Lengths are covered in detail in our section on values.
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.
If no value is set for the width of an element, its width is set to auto.
An element does not inherit the width of its parent.
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | Y | Y | Y | P | Y | Y | B | Y | Y | Y | N |
Netscape Navigator 4.x: width is not supported on images at all. On block elements width is supported for length units, but it renders inaccurately if % units are given.Internet Explorer 4.0x for Windows and Mac: width is correctly supported on images, but not supported at all on block elements (either % or length values), e.g. paragraphs. |
|||||||||||
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.
min-width can be specified as a percentage, as a length value, or none.
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.
A min-width can be specified as a length. Lengths are covered in detail in our section on values.
If no value is set for the min-width of an element, its min-width is set to none.
An element does not inherit the min-width of its parent.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| N | N | N | N | N | N | N | N | Y | N | N | N |
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.
max-width can be specified as a percentage, as a length value, or none.
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.
A max-width can be specified as a length. Lengths are covered in detail in our section on values.
If no value is set for the max-width of an element, its max-width is set to none.
An element does not inherit the max-width of its parent.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| N | N | N | N | N | N | N | N | Y | N | Y | N |
The height property enables you to specify the height of an element in a number of ways.
height can be specified as a percentage, as a length value, or as auto.
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.
A height can be specified as a length. Lengths are covered in detail in our section on values.
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.
If no value is set for the height of an element, its height is set to auto.
An element does not inherit the height of its parent.
height was specified as part of the original CSS1 recommendation. It is modified in part by the CSS2 recommendation.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | P | Y | Y | Y | N |
height was not supported on images in Netscape Navigator 4.x. |
|||||||||||
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.
z-index is specified either by an integer, or by the keyword auto.
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.
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.
Where no z-index is specified, the z-index of an element is auto.
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.
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N |
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.
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.
If no visibility is specified, an element has a visibility of inherit.
An element only inherits its parent's visibility if the element's visibility is set to inherit.
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N |
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.
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.
If no overflow is specified, the overflow of an element is visible.
An element does not inherit the overflow of its parent.
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| N | Y | Y | Y | N | N | B | N | Y | N | P | N |
Internet Explorer 5.0 Macintosh does not support overflow very well at all. Inconsistently, it will draw a scroll bar for scroll. If you use visible, it extends the background as well as the content, which is arguably incorrect. If you use auto, instead of scrolling the overflow as it should, it shows it as visible. Worst, if you use hidden, when this field is clicked into, the application crashes - not good.Internet Explorer 5.0, 5.5 and 6.0 Windows supports overflow well. The only minor problem it has is in extending the background as well as the content when the value of visible is given.Opera 5.0 does not support scroll - the content will appear the same as if it was hidden.A word about autoThe behavior of the browser when the value is set to auto is, according to the specification, "user agent specific", although a scrolling mechanism should be provided. The obvious scrolling mechanism is a scroll bar, but it is also acceptable to simply allow the content to scroll when dragged down with the cursor. Both Opera and Internet Explorer 5 Macintosh don't correctly support auto - they treat it the same as they do visible. Internet Explorer 6 Windows and Netscape Navigator 6 both correctly support auto by giving a scroll bar. |
|||||||||||
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.
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.
If no float is specified, elements have a float of none.
An element does not inherit the float of its parent.
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| B | B | Y | Y | B | B | Y | B | Y | Y | Y | N |
| Internet Explorer 4.0x Macintosh ignores margins on floating elements. On windows, they mostly get it right, but don't expect perfection. This can be said for block elements as well. Internet Explorer 4.5 Macintosh and 5 for windows gets margins on floating elements right. Generally it seems to get float right, including for<div>s. Caution is still required however.Netscape Navigator 4.x: using float is risky as it can cause serious unexpected rendering problems. The only thing that seems to work well is the simplest thing of making a replaced element such as an image float outside another element, e.g. a <paragraph>.Opera 3.6 displays very minor problems, for example floating an image to the right of a paragraph, even though the width of the paragraph is set to 100%. Internet Explorer 5 for Macintosh and 5.5 for Windows, along with Netscape 6 are approaching excellent support for float, but care still needs to be taken. |
|||||||||||
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.
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.
If no clear is specified, an element has a clear of none, allowing floating on both sides.
An element does not inherit the clear of its parent.
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| B | Y | Y | Y | B | B | Y | B | Y | Y | Y | N |
clear basically works in both Netscape Navigator 4.x and Internet Explorer 4.0. However, because of the problems with float, clear in combination with float cannot be relied upon. Take care when using these.Internet Explorer 4.5 Macintosh and 5 Windows is much improved to the point of being correct for most implementations of clear, and its interaction with float. Care should still be taken.Although Opera 3.6 does display some errors in extreme circumstances, it would be churlish not to say that the support is very good. Take care however. |
|||||||||||
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.
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.
Where no value is specified, the clip of an element is auto.
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.
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.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| N | N | Y | Y | N | N | P | N | Y | N | P | N |
Internet Explorer 5.0 Macintosh largely supports clip at least for paragraphs. It does not correctly support padding on clipped elements. It does not support clip on images - the image will not be drawn at all.Internet Explorer 5.5 and 6 also largely support the clip property. It does not correctly support padding on clipped elements, but it does support clip on images.Opera 5.0 largely supports clip at least for paragraphs. It does not correctly support padding on clipped elements. It does not support clip on images - the image will be drawn as it would normally.Netscape Navigator 6 supports clip very well, including on images. It also draws padding on clipped elements correctly. |
|||||||||||
| introduction | selectors | properties | advanced | real world CSS text style | text layout | background | border | margin | padding | page layout | element type | user interface | values |
|
|
|
|