Home arrow Style Sheets arrow Page 2 - Introduction to CSS Positioning Properties Part 1

Introduction to CSS Positioning Properties Part 1

Web designers gained a great deal from the CSS2 specification, especially when it comes to increased flexibility to position HTML elements exactly where they want them within Web pages. Keep reading to learn more.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 11
February 21, 2005
  1. · Introduction to CSS Positioning Properties Part 1
  2. · Basic definitions
  3. · Inline and block boxes
  4. · CSS 2 Positioning Schemes
  5. · The "position" property
  6. · The "display" property

print this article

Introduction to CSS Positioning Properties Part 1 - Basic definitions
(Page 2 of 6 )

Letís start by explaining the basic concepts inherent to visual presentation:

ViewPort: The ViewPort (or window) is the area of the screen in which our Web page is displayed. This concept must not be interpreted as the the Initial Containing Block, since itís completely different, as weíll see in a moment.

Initial Containing Block: The Initial Containing Block is the whole space assigned to our Web document. When weíre referring to the whole space, weíre including any sections of the page that users must scroll to in order to see them in the Viewport. Itís also possible to define and limit the size of the Initial Containing Block by setting the width and height properties of the Root element. Now, letís see what the root element is.

Root element: The Root Element is generally defined as the <html> element. Some older browsers interpret that the root element is in fact the <body> element, such as IE 4 and IE 5.5. However, newer browsers consider <html> to be the Root element, since it is the root positioning context of a document in a purely W3C-compliant environment. In order to apply a specific style to the root element in a safer way and avoid possible difficulties, any CSS declaration should be implemented to both elements together, the <html> and <body> elements, as follows:

<style type="text/css">

     html,body {

     /* style rules go here */



Quite simple, right? Letís move on a little bit, and define some other key concepts inherent to CSS positioning.

Containing blocks: In each Web document we have containing blocks, which are elements that usually wrap many other elements inside. More specifically, <div> elements are best suited to contain any other page elements, behaving as real containing blocks. According to OíReillyís HTML reference, "the <div> element gives structure and context to any block-level content in a document. Itís more convenient to use the <div> element as a wrapper for multi-element content that is to be governed by a single style sheet rule."

As we can see, <div> elements are true containing blocks, as illustrated in the following examples:

<div id="content">

<div id="news">

News content goes here


<div id="articles">

Article content goes here



In the above example, the "div#content" element is the containing block for the "div#news" and the "div#articles" elements. Certainly, <div> containing blocks are not limited to wrapping other divs. Theyíre extensively used to contain several HTML elements, such as:

<div id="content">

<p>Paragraph conten goes here</p>

<p>Paragraph conten goes here</p>


This sample shows a containing block, that is, the "div#content", wrapping up two paragraph elements, which along with the <div> element, are considered as block boxes. However, <table> elements or any block-level element, such as <p>, or header tags are considered  containing blocks, because theyíre extensively used to wrap content and utilized for element layout. So, itís time to define the different types of boxes in CSS positioning.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials