Article
About the Author
Nigel Peck
Nigel is the Managing Director of MIS Web Design in Sheffield (UK), specialising in Web Design and Development, Accessibility, Usability Testing and Search Engine Optimisation. He also recently launched Accessify Forum.
CSS Positioning Properties At-A-Glance Guide
Every day this week, we’ll be publishing an article that’s been hand picked by our editor, as part of CSS Theme Week.
This article is aimed at experienced CSS developers who need a reference for the properties related to positioning in CSS 2. Each section of this article includes a link to the relevant section of the SitePoint CSS Reference and the W3C CSS 2 Specification.
This article is not intended to cover in depth all the positioning-related information contained in the specification, but to describe only those properties and values that are implemented in some or all modern browsers, and are of real-world use to you today.
Definitions
First let’s look at a few definitions of concepts that need to be explained. You can skip ahead if you like, and use this list as a reference to check if you stumble on something. Of course, don't forget that the SitePoint CSS Reference contains comprehensive information about all properties, not just those collated here.
The Viewport
http://www.w3.org/TR/REC-CSS2/visuren.html#q2
The Viewport is the area of the screen in which your web page is displayed. This is not the same as the Initial Containing Block.
The Initial Containing Block
http://www.w3.org/TR/REC-CSS2/visuren.html#initial-containing-block
The Initial Containing Block is the entire space assigned to your document. In referring to the entire space, we include any bits of the page that users have to scroll to in order to see them (in the Viewport).
It is possible to limit the size of the initial containing block by setting the width and height properties of the root element.
The Root Element
The root element is the html element. When we apply CSS Rules to the root element it is safer (allows browsers to do as they wish) to apply them to both the html and the body element:
html, body {
/* Style Rules Here */
}
Care must be taken with this approach, however, because the net effect has the potential to compound. For example, doing the following will result in 100px of padding being applied to every edge of the page — 50px for each element.
html, body {
padding:50px;
}
Containing Blocks
http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block
Every element in your document has a containing block. This is the block element that it is inside, for example:
<div id=”content”>
<div id=”example”>
</div>
</div>
The div#content is the containing block for div#example.
Box Types
Boxes come in a number of different types. The only types we are concerned with in this article are block boxes and inline boxes.
Block Boxes
http://www.w3.org/TR/REC-CSS2/visuren.html#q5
Block boxes are the types of boxes generated (by default) by elements like p and div. A block box has space around it, and elements that come after start below the box instead of next to it.
For example:
<p>Test</p>
<p>Text</p>
will be displayed (by default) as:
Test
Text
instead of:
Test Text
…as it would if p was (by default) an inline element.
Inline Boxes
http://www.w3.org/TR/REC-CSS2/visuren.html#q7
Inline elements are displayed next to each other. For example:
<strong>Test</strong>
<em>Text</em>
will be displayed (by default) as:
Test Text
instead of:
Test
Text
…ignoring any other visual formatting these elements normally produce.